如何减小 Kendo UI 饼图的大小？

Posted 2023-02-22

【中文标题】如何减小 Kendo UI 饼图的大小？

【英文标题】：How to reduce the size of the KendoUI Pie Chart?

【发布时间】：2012-02-06 04:32:26

【问题描述】：

如何减小 KendoUI 饼图的大小？我正在使用使用以下配置的饼图。我已将边距设置为 1 像素，将填充设置为 1 像素，但它似乎对饼图的呈现方式没有任何影响。我没有标题，但仍有标题空间。我希望能够减少图表顶部和图例与实际图表之间的空间。

我的配置：

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 
        );

【问题讨论】：

你能分享一些你的 JSON 数据吗？也许只有一行？

【参考方案1】：

饼图默认有60px padding。如果您需要减少饼图周围的空间，则需要更改该填充。

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

【参考方案2】：

$("#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中定义一个属性来调整饼图的大小..