Highcharts样式模式下禁用系列非活动状态失效怎么办？

嗨，这个问题我之前也碰到过，本质是样式模式下Highcharts的非活动状态样式由CSS主导，你设置的inactive.enabled: false会被默认CSS的样式规则覆盖，所以才没生效。下面给你两种可行的解决办法：

方法1：直接用CSS覆盖默认样式（最直观） #

既然样式模式是靠CSS管理样式，那直接修改CSS就能解决问题。在你的自定义样式里加上这段代码，就能取消所有系列的悬停淡化效果：

.highcharts-series:not(.highcharts-series-active) {
    opacity: 1 !important;
}

如果只想针对特定系列生效，还可以给目标系列加个自定义类名，再精准匹配：

// 给需要的系列添加className配置
series: [{
    name: '销售数据',
    data: [120, 150, 180],
    className: 'no-fade-series'
}]

// 只取消该系列的非活动淡化
.highcharts-series.no-fade-series:not(.highcharts-series-active) {
    opacity: 1 !important;
}

方法2：结合JS配置与CSS调整（更贴合Highcharts规范） #

如果你更倾向用JS配置来控制，也可以保留你的原配置，再配合CSS移除默认的强制样式：

1. 保留你的JS配置不变：

plotOptions: {
    series: {
        states: {
            inactive: {
                enabled: false
            }
        }
    }
}

2. 在CSS中移除默认的非活动状态透明度设置：

.highcharts-series:not(.highcharts-series-active) {
    opacity: unset;
}

这样JS的配置就能正常生效了，因为CSS不再强制给非活动系列设置透明度。

补充说明 #

在样式模式下，Highcharts默认的CSS文件里定义了.highcharts-series:not(.highcharts-series-active)的opacity值（通常是0.2），这个CSS规则的优先级比JS配置更高，所以即使你在JS里禁用了非活动状态，CSS还是会让其他系列淡化——这就是你关闭样式模式就正常的原因。

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