如何实现Highcharts饼图扇区边框及带扇区间隙的环形图？

1. 实现饼图扇区的边框 #

直接通过plotOptions.pie下的borderWidth和borderColor配置项即可实现扇区边框：

• borderWidth：设置边框宽度（单位：像素）
• borderColor：设置边框颜色（支持十六进制、RGB等格式）

示例代码：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            borderWidth: 2,
            borderColor: '#ffffff'
        }
    },
    series: [{
        data: [
            ['A', 30],
            ['B', 20],
            ['C', 50]
        ]
    }]
});

2. 制作嵌套环形图及外层扇区间隙 #

通过多饼图系列实现嵌套环形效果，外层扇区的间隙用plotOptions.pie.gapSize配置项控制：

核心配置要点： #

• 内层系列：设置size为较小百分比，innerSize设为0%（实心饼）或对应百分比（环形）
• 外层系列：设置更大的size和匹配的innerSize形成环形，同时用gapSize设置扇区间隙（单位：饼图半径的百分比）
• 两个系列默认居中，无需额外调整中心位置

示例代码：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            center: ['50%', '50%'],
            borderWidth: 1,
            borderColor: '#ffffff'
        }
    },
    series: [
        // 内层饼图
        {
            name: '内层',
            size: '40%',
            innerSize: '0%',
            data: [
                ['内层1', 40],
                ['内层2', 60]
            ]
        },
        // 外层环形图（带扇区间隙）
        {
            name: '外层',
            size: '80%',
            innerSize: '50%',
            gapSize: 3,
            data: [
                ['外层1', 25],
                ['外层2', 20],
                ['外层3', 30],
                ['外层4', 25]
            ]
        }
    ]
});

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