能否使用纯CSS对Highcharts 9.2.2版本饼图进行样式定制

Highcharts 9.2.2版本完全支持纯CSS自定义样式，你遇到的样式不生效问题大概率是没有开启styledMode配置，Highcharts默认会给所有元素加内联样式，普通CSS的优先级不足以覆盖内联样式，你需要先调整初始化配置：

Highcharts.chart('container', {
  chart: {
    styledMode: true // 关闭默认内联样式，允许CSS接管样式控制
  },
  // 其余原有图表配置保持不变即可
})

开启后你就可以用对应类名修改目标元素样式，注意Highcharts使用SVG渲染图表，文字颜色需要用fill属性设置，不要用普通CSS的color属性：

修改图表标题样式 #

标题对应的类名为.highcharts-title，示例样式如下：

.highcharts-title {
  fill: #2d3436;
  font-size: 22px;
  font-weight: 700;
  font-family: "Microsoft Yahei", sans-serif;
}

修改饼图标签样式 #

饼图标签分为两类，分别对应不同的类名：

• 扇区旁的直接数据标签：使用.highcharts-pie-series .highcharts-data-label text选择器

.highcharts-pie-series .highcharts-data-label text {
  fill: #ffffff;
  font-size: 14px;
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
}

如果需要修改标签和扇区间的连线样式，可以使用.highcharts-data-label-connector选择器：

.highcharts-data-label-connector {
  stroke: #636e72;
  stroke-width: 1px;
}

• 下方图例文字标签：使用.highcharts-legend-item text选择器

.highcharts-legend-item text {
  fill: #4a4a4a;
  font-size: 13px;
}
/* 可单独设置hover状态样式 */
.highcharts-legend-item:hover text {
  fill: #0984e3;
}

如果你暂时不想开启styledMode，也可以在CSS属性后加!important强制覆盖内联样式，但该方法可能引发其他样式冲突，仅作为临时方案使用，不推荐长期使用。

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