Highcharts Styled mode饼图：修改默认颜色、解决误填标签线及外侧描边设置

扇区颜色误填充到标签引导线的规避方案 #

问题根源是Styled Mode下，饼图扇区、标签引导线同属一个系列DOM组，若选择器命中范围过宽，本该仅作用于扇区的填充属性会透传到引导线路径元素上，引发样式错乱。具体规避操作：

• 取消对全局层级过宽的.highcharts-point选择器直接赋值的写法，改用扇区专属的带序号类选择器，例如.highcharts-series-0 .highcharts-point-0，单独为每个扇区设置fill属性，精准命中扇区元素，不会波及同组的引导线。
• 为标签引导线的专属类.highcharts-label-connector添加兜底规则，强制设置fill: none，无论上级选择器优先级多高，引导线都不会被填充任何颜色。
• 移除JS初始化配置里的color、colors这类视觉属性，Styled Mode下所有颜色规则全部移交CSS层控制，避免JS层配置穿透到子元素引发样式冲突。

饼图扇区外侧描边的设置方法 #

Styled Mode下没有对应的JS描边配置项，所有描边效果全部通过CSS选择器实现：

• 全局为所有饼图扇区设置描边时，精准选择扇区专属类.highcharts-pie-series .highcharts-point，在规则内添加stroke: #描边色值; stroke-width: 描边宽度数值px;即可生效，不会影响同组的引导线、标签元素。
• 若需要为单个扇区设置差异化描边，直接选中该扇区的专属类（例如.highcharts-point-3），单独配置stroke和stroke-width属性即可。

避坑提示：不要在父级系列类（例如.highcharts-series）上设置描边属性，否则同组下的引导线、标签文本也会被错误添加描边效果。

涉及的参考代码：

• 个人测试代码：https://codepen.io/jenfloods/pen/WNRELrP
• 官方Styled Mode饼图演示代码：https://www.highcharts.com/demo/styled-mode-pie

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