如何调整Kendo donut环形图与状态栏之间的过大空白间距

解决方案 #

首先先修正你代码中的两处语法错误，避免图表渲染异常：

1. series数组闭合的]后面漏写逗号，会导致后续tooltip配置不生效
2. legend.labels配置下的position: "center"是无效属性，且多了多余的尾逗号，直接删除即可

接下来针对空白间距过大的问题，按以下步骤修改配置即可：

1. 给chartArea添加padding和高度配置，消除图表区域默认留白

chartArea: {
    position: "center",
    // 消除默认边距
    padding: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
    },
    // 自定义图表区域高度，避免自动计算预留过多空白，数值按需调整
    height: 300
},

2. 调整环形图系列配置，控制环形本身的边距和占比

series: [{
    type: "donut",
    field: "value",
    categoryField: "source",
    explodeField: "explode",
    // 新增以下配置消除环形外围默认留白
    padding: 0,
    margin: 0,
    // 调整中间孔的大小，间接控制环形整体的显示占比，数值按需调整
    holeSize: 60,
    labels: {
        visible: true,
        position: "center",
        template: "#: value # Files"
    }
}],

3. 调整图例配置，缩小图例和环形图之间的间距

legend: {
    position: "left",
    // 消除图例的默认内外边距
    padding: 0,
    margin: 0,
    // 缩小图例每个条目之间的间距，数值按需调整
    item: {
        margin: 2
    },
    labels: {
        visible: true,
        template: kendo.template("#: text # #: Math.floor(percentage*100) #%")
    }
},

4. 给图表外层容器添加样式控制，避免外层容器默认样式导致的留白

#chart {
    height: 300px; /* 和上面chartArea设置的height保持一致即可，按需调整 */
    margin: 0;
    padding: 0;
}

内容的提问来源于stack exchange，提问作者jhgbvc