Asp.net MVC Kendo ui 呈现多个饼图

Question

我正在尝试渲染包含在一个 foreach 循环中的多个 kendo ui 饼图。呈现时，所有跟踪项（在 Model.TrackingItems 中）都正确显示（在跨度之间），但是，仅呈现第一个图表。列表中的Tracking Items中有三个项目，应该渲染三个饼图。任何想法可能是什么问题？

提前致谢。

  @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))

Asp.net MVC Kendo ui 呈现多个饼图

Asp.net MVC Kendo ui render multiple pie charts

charts

pie-chart

kendo-ui-mvc