하이 차트에는 foreach에 여러 차트가 포함되어 있습니다.

Question

저는 ASP.NET에서 작업 중이며 foreach 루프가 있습니다. 루프의 각 반복마다 새로운 하이 차트를 추가하고 싶습니다. 오류가 발생하지는 않지만 첫 번째 차트 만 표시되고 아무 것도 표시하지 않습니다.

@foreach (Review r in @Model.Reviews) 
{ 

    <div style="margin-bottom: 10px; width: 70%;"> 
     @Html.ActionLink(@r.Business.Name, "BusinessDetail", new { id = @r.Business.ID }, new { @class = "business-link" }) 
    </div> 


    <div style="width: 70%;" id="review-container"> 
     <p>@r.Text</p> 
     <center style="margin-bottom: 25px;"> 

      <div id='container1' style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"> 
       <script type="text/javascript"> 
        $(function() { 
         $('#container1').highcharts({ 
          chart: { 
           backgroundColor: 'rgba(255, 255, 255, 0.01)', 
           plotBorderWidth: 0, 
           plotShadow: false 
          }, 
          title: { 
           text: 'Browser<br>shares', 
           align: 'center', 
           verticalAlign: 'middle', 
           y: 50 
          }, 
          tooltip: { 
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
          }, 
          plotOptions: { 
           pie: { 
            dataLabels: { 
             enabled: true, 
             distance: -50, 
             style: { 
              fontWeight: 'bold', 
              color: 'white', 
              textShadow: '0px 1px 2px black' 
             } 
            }, 
            startAngle: -90, 
            endAngle: 90, 
            center: ['50%', '75%'] 
           } 
          }, 
          series: [{ 
           type: 'pie', 
           name: 'Vote Count', 
           data: [ 
            ['Useful', @r.UsefulVoteCount], 
            ['Cool', @r.CoolVoteCount], 
            ['Funny', @r.FunnyVoteCount], 

           ] 
          }] 
         }); 
        }); 

       </script> 
      </div> 
     </center> 
    </div> 
</center> 

}

Answer 1

귀하의 코드가 r의 통해 반복되고 있지만 오직 $('#container1').highcharts(...)에서 차트를 만드는 :

이 내가 가진 것입니다. 차트를 생성하려면 새 컨테이너를 만들고 highcharts을 새로 호출해야합니다. 이를 수행 할 수있는 많은 방법이 있습니다.