Asp.net MVC Kendo ui 여러 원형 차트 렌더링

Question

foreach 루프 내에 포함 된 여러 검도 UI 원형 차트를 렌더링하려고합니다. 렌더링 할 때 (Model.TrackingItems의) 모든 추적 항목이 올바르게 표시되지만 (범위 사이에 있음) 첫 번째 차트 만 렌더링됩니다. 추적 항목에는 세 개의 항목이 있으며 세 개의 원형 차트가 렌더링되어야합니다. 어떤 아이디어가 문제 일 수 있습니까?

미리 감사드립니다.

@foreach (var item in Model.TrackingItems) 
     { 
      @* THIS PART IS RENDERED FOR EACH ITEM *@ 

    <span>Not Done - </span>@Html.Encode(item.NotDone)<br /> 
        <span>Not Required - </span>@Html.Encode(item.NotRequired)<br /> 
        <span>Completed - </span>@Html.Encode(item.Completed)<br /> 
        <span>Cancelled - </span>@Html.Encode(item.Cancelled)<br /> 

       @* ONLY THE FIRST PIE CHART IS RENDERED *@ 
       <div id="@Html.Encode(item.Id)" class="chart-wrapper"> 
        @(Html.Kendo().Chart() 
        .Name("chart") 
        .Title(title => title 
        .Text("Tracking Info") 
        .Position(ChartTitlePosition.Top)) 
        .Legend(legend => legend 
        .Visible(false) 
       ) 
       .Series(series => 
       { 
        series.Pie(new dynamic[] { 
         new {category="Not Done",value=@item.NotDone,color="#9de219"}, 
         new {category="Not Required",value=@item.NotRequired,color="#90cc38"}, 
         new {category="Completed",value=@item.Completed,color="#068c35"}, 
         new {category="Cancelled",value=@item.Cancelled,color="#006634"}, 

       }) 
       .Labels(labels => labels 
        .Template("#= category #: \n #= value#%") 
        .Background("transparent") 
        .Visible(true) 
       ) 
       .StartAngle(150); 
       }) 
       .Tooltip(tooltip => tooltip 
       .Visible(true) 
       .Format("{0}%") 
       )) 
       </div> 
     } 

Answer 1

.Name 특성은 div id가 아니라 고유해야합니다.

Changed 

.Name("chart") 

To 

.Name(@Html.Encode(item.Id))