c# - 控制 KENDO UI 圆环图的大小

Question

我在控制 Kendo-UI 中 Donut 组件的大小时遇到​​困难 ( Here )。这是我的代码:

   <div class="analytic-block">
    <h4>Sources</h4>
        <span class="text-muted">Recent activity</span>

     @(Html.Kendo()
          .Chart<ActivityModel>()
          .Name("donutChart")
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
          .DataSource(ds => ds
                              .Read(read => read.Action("Sources", "Statistics"))
                              .Group(group => group.Add(item => item.SliceLayer))
                              .Sort(sort => sort.Add(item => Guid.NewGuid().ToString())))
          .Series(series =>
          {
              series.Donut(model => model.Share, model => model.Label, model => model.Color, model => true, mode => true)
                    .Border(b =>
                    {
                        b.Color("white");
                        b.Width(2);
                    })
                    .StartAngle(0)
                    .Labels(labels => labels.Visible(true)
                                            .Position(ChartPieLabelsPosition.OutsideEnd)
                                            .Template(" #=dataItem.Label #")//.Template("<span style=\"color:#=dataItem.Color#;\">  #=dataItem.Label # </span>")
                                            .Background("transparent")
                                            .Border(1, "grey", ChartDashType.Solid)
                                            .Padding(2))
              .Padding(120);
          })
          .Tooltip(tooltip => tooltip
                                     .Template("  #=dataItem.Label # ")
                                     .Visible(true)))
</div>

这是它产生的结果:

我可以通过更改 .Padding(120) 来调整图表的大小，但这会在图表的上方和下方留下两个大的空间。我找不到任何关于如何操纵绘制此图表的区域大小的引用。

如果有人可以提出解决方案，我们将不胜感激。

Answer 1

我发现了我的错误。 div-container 必须与图表 ID 相关:

<div id="donutChart" class="analytic-block">

 @(Html.Kendo()
      .Chart<ActivityModel>()
      .Name("donutChart")
</div>