使用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

您可以提供容器元素的寬度嗎？ 我可以提供一個更准確的答案。

根據您的圖片，我正在顯示它的寬度約為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>