如何解决Highcharts环形图中数据系列悬停时的线条重叠问题，实现非圆角尖锐边缘

我明白你遇到的问题了——这种用Pie图模拟的大边框环形图，默认的圆角边缘加上悬停高亮效果，很容易出现相邻切片重叠的情况。别担心，通过两个关键配置就能轻松解决：

核心修改点 #

• 关闭切片的圆角效果，让边缘变成尖锐样式
• 优化悬停高亮的亮度，避免过度高亮加剧重叠视觉感

修改后的完整代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        margin: [0, 0, 0, 0]
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        pie: {
            startAngle: 90,
            innerSize: '99%',
            borderWidth: 16,
            slicedOffset: 40,
            borderColor: undefined,
            borderRadius: 0, // 关键：关闭圆角，让边缘变为尖锐样式
            dataLabels: { enabled: false },
            states: {
                hover: {
                    brightness: 0.1, // 调整高亮亮度，避免过度重叠视觉
                    halo: { size: 0 }
                }
            }
        }
    },
    series: [{
        data: [29.9, 71.5,50]
    }]
});
</script>

配置说明 #

1. borderRadius: 0：这是解决重叠的核心设置。Highcharts的Pie切片默认带有圆角，当borderWidth设置得很大时，圆角部分会自然侵入相邻切片的区域。将该值设为0后，切片边缘会变成直角，完全贴合各自的扇形区域，彻底消除重叠问题。
2. 调整brightness值：原来的brightness: 1会让悬停切片变得极亮，视觉上很容易“覆盖”相邻区域。改成较小的数值（比如0.1），既能保留悬停高亮的交互反馈，又不会让高亮效果过度夸张。

这样修改后，你悬停任意一个切片时，它的边缘会保持清晰的尖锐样式，再也不会和其他系列的区域重叠啦！

内容的提问来源于stack exchange，提问作者Tamás Köböl