Question

我正在尝试渲染foreach循环中包含的多个kendo 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))

Asp.net MVC Kendo ui渲染多个饼图

1 个答案: