使用 Kendo UI 饼图，如何去除空白？

Posted 2023-02-22

【中文标题】使用 Kendo UI 饼图，如何去除空白？

【英文标题】：Using KendoUI Pie Chart, How do you remove white space?

【发布时间】：2012-04-26 06:39:40

【问题描述】：

我正在使用 KendoUI 饼图，并且有很多空白区域。什么是最好的删除它的方法。见下图：

我的 java 脚本如下所示：

<div id="divGraph1" style="width:250px; height:250px;"/>

jQuery("#divGraph1").kendoChart( 
     legend: 
          position: "bottom", 
          padding: 1, 
          margin: 1 
     , 
     seriesDefaults: 
          labels: 
               visible: true, 
               template: "#= kendo.format('0:P', percentage)#" 
          , 
          visible: true 
     , 
     tooltip: 
          visible: true, 
          template: "#= category # - #= kendo.format('0:P', percentage)#" 
     , 
     seriesColors: [ 
          "#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
     ], 
     title:  
          padding: 1, 
          margin: 1 
     , 
     chartArea:  margin: 1 , 
     plotArea:  margin: 1 , 
     series:[ 
          type: "pie", 
          data: [
                category: "Facilities in IDN", value: 3 ,
                category: "Standalone Facilities", value: 4 
           ] 
      ]
 );

任何建议都将不胜感激。

【参考方案1】：

你能提供容器元素的宽度吗？我可以提供更准确的答案。

根据您的图片，我显示它的宽度约为 475 像素。有一个可用的高度配置选项，您可以使用它来缩小它的大小。它需要一个整数（以像素为单位）。

jQuery("#divGraph1").kendoChart( 
 legend: 
      position: "bottom", 
      padding: 1, 
      margin: 1 
 , 
 seriesDefaults: 
      labels: 
           visible: true, 
           template: "#= kendo.format('0:P', percentage)#" 
      , 
      visible: true 
 , 
 tooltip: 
      visible: true, 
      template: "#= category # - #= kendo.format('0:P', percentage)#" 
 , 
 seriesColors: [ 
      "#004990", "#da7633", "#8a7967", "#8b0f04", "#ead766", "#676200", "78496a"
 ], 
 title:  
      padding: 1, 
      margin: 1 
 , 
 chartArea: 
      margin: 1,
      height:300 /* add this option */
 , 
 plotArea:  margin: 1 , 
 series:[ 
      type: "pie", 
      data: [
            category: "Facilities in IDN", value: 3 ,
            category: "Standalone Facilities", value: 4 
       ] 
  ]
);

如果您不喜欢在选项中传递布局信息（我不喜欢！），Kendo 将从您用来保存图表的 div 继承 CSS。以下 html 会将图表限制为 475x300。

<div id='divGraph1' style='width:475px;height300px'></div>

【讨论】：

谢谢.. 通过删除“height:250px;”从 DIV 样式并将高度添加到图表区域。这对我有用。

很高兴听到 - 与剑道一起玩！ :)