Highcharts环形图：切片填充色、边框色及间隙设置问题求助

要实现你需要的环形图效果，核心是区分切片间隙和切片边框的配置逻辑，不要用borderWidth控制间隙，而是用Highcharts专门的间隙配置项，同时单独设置边框样式：

关键配置方案 #

• 自定义切片颜色：直接在colors数组中指定各切片的颜色
• 实现0.25%的环形填充厚度：通过plotOptions.pie.innerSize设置环形内半径占比为'99.75%'，外层半径默认'100%'，环形厚度即为0.25%
• 设置切片边框：用plotOptions.pie.borderWidth定义边框宽度，borderColor设置边框颜色
• 保留10px切片间隙：使用plotOptions.pie.gap配置像素值间隙，该间隙会显示容器背景色，不会被边框色填充

完整代码示例 #

Highcharts.chart('container', {
    colors: ['#007bff', '#28a745', '#dc3545', '#ffc107'], // 自定义切片颜色数组
    chart: {
        type: 'pie'
    },
    title: {
        text: '环形图示例'
    },
    plotOptions: {
        pie: {
            innerSize: '99.75%', // 环形内半径，对应0.25%的填充厚度
            borderWidth: 2, // 切片边框宽度，若需0.5%占比可根据容器尺寸换算像素值
            borderColor: '#ffffff', // 切片边框颜色
            gap: 10, // 切片间10px间隙，透显容器背景色
            dataLabels: {
                enabled: false // 按需开启数据标签
            }
        }
    },
    series: [{
        name: '数据',
        data: [
            ['类别1', 10],
            ['类别2', 20],
            ['类别3', 30],
            ['类别4', 40]
        ]
    }]
});

配置说明 #

• gap与borderWidth的区别：gap是Highcharts专门用于设置饼图切片空隙的配置，单位为像素，空隙会透显容器背景；borderWidth仅作用于切片自身的边框，不会填充间隙区域，二者搭配即可实现需求。
• 边框占比调整：若需边框占比为0.5%，可根据图表容器的实际尺寸计算对应的像素值（例如容器宽度为400px时，边框宽度设为2px即可达到0.5%占比）。

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