如何縮小KendoUI餅圖的大小？

如何縮小KendoUI餅圖的大小？我正在使用以下配置的餅圖。我已將邊距設置爲1像素，並將填充設置爲1像素，但對餅圖的呈現方式似乎沒有任何影響。我沒有冠軍，但仍有空間可以冠軍。我希望能夠縮小圖表頂部和圖例與實際圖表之間的空間。如何縮小KendoUI餅圖的大小？

我的配置：

jQuery("#chart").kendoChart({ 
//    theme: jQuery(document).data("kendoSkin") || "Metro", 
      legend: { 
       position: "bottom", 
       padding: 1, 
       margin: 1 
      }, 
      seriesDefaults: { 
       labels: { 
        visible: true, 
        template: "${ value }%" 
       } 
      }, 
      dataSource: { 
       data: <%=ChartData%> 
      }, 
      series: [{ 
       type: "pie", 
       field: "percentage", 
       categoryField: "source", 
       explodeField: "explode" 
      }], 
      tooltip: { 
       visible: false, 
       template: "${ category } - ${ value }%" 
      }, 
      title: { padding: 1, margin: 1 }, 
      seriesColors: ["#d15400", "#19277e", "#e2935e", "#d2d2d2"], 
      chartArea: { margin: 1 }, 
      plotArea: { margin: 1 } 
     });

來源

2012-01-09 Rodney

你能分享一下您的JSON數據？也許只有一條線？ – 2012-01-20 16:52:34

餅圖具有60像素padding默認。如果您需要減少餅圖周圍的空間，則需要更改該填充。

... 
series: [{ 
    type: "pie", 
    field: "percentage", 
    categoryField: "source", 
    explodeField: "explode", 
    padding: 0 
}] 
...

來源

2012-02-23 09:03:33 gudman

認真，謝謝！ – zeroflaw 2017-10-25 05:35:02

$("#chart").kendoChart({ 
    theme: $(document).data("kendoSkin") || "default", 
    title: { 
     text: "Samplet" 
    }, 
    seriesDefaults: { 
     labels: { 
      template: "#= kendo.format('{0:P}', percentage)#", 
      visible: true 
     } 
    },chartArea: { 
    width: 300, 
    height: 300 
}, 
    series: [{ 
     type: "pie", 
     data: [{ 
      category: "Quality", 
      value: 80}, 
     { 
      category: "Time", 
      value: 20}, 
     { 
      category: "Cost", 
      value: 40}]}], 
    tooltip: { 
     visible: true, 
     template: "#= kendo.format('{0:P}', percentage)#" 
    } 

});

這裏我們定義在chartarea來調整餅圖的屬性..

來源

2014-06-03 06:37:43 Sankar

如何縮小KendoUI餅圖的大小？

回答

相關問題