使用KendoUI饼图,如何删除空格？

Question

我正在使用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 }
           ] 
      }]
 });

任何建议将不胜感激.

Answer 1

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

从你的图像,我显示它大约475px宽.有一个高度配置选项可用于缩小尺寸.它需要一个整数(以像素为单位).

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>