控制 KENDO UI 圆环图的大小

Posted 2023-05-07

【中文标题】控制 KENDO UI 圆环图的大小

【英文标题】：Controlling size of KENDO UI Donut Chart

【发布时间】：2014-05-02 01:30:37

【问题描述】：

我在 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) 来调整图表的大小，但这会在图表上方和下方留下两个大空间。我找不到任何关于如何操纵区域大小来绘制此图表的参考。

如果有人能提出解决方案，将不胜感激。

【参考方案1】：

您应该简单地将宽度/高度设置为您变成图表的 div 图表元素。

Here 就是一个例子。

【讨论】：

谢谢，问题是我没有将包含的 div ID 与图表的 ID 相关联。你的回答促使我找到了正确的答案。

【参考方案2】：

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

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

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