Highcharts散点图inactive配置项不生效问题

核心原因 #

• 版本不兼容：你当前项目使用的Highcharts版本为6.1.1，系列inactive（非激活）状态的内置支持是从7.0.0版本才加入的特性，6.x版本的源码中没有对应状态的处理逻辑，配置中写任何inactive相关字段都不会被识别解析。在线编辑器能正常运行是因为平台默认加载的是7.x以上的高版本Highcharts。
• 配置层级错误：即便升级到支持inactive特性的版本，你当前plotOptions下仅配置了column类型的参数，而你的图表主类型是scatter散点图，写在column下的配置不会作用于散点系列，inactive规则自然无法触发。

修复方法 #

• 优先选择升级版本：将项目内的Highcharts升级到7.0.0及以上版本，同时把inactive配置挂载到正确的层级，示例配置如下：

plotOptions: {
  // 散点图的配置要写在scatter节点下
  scatter: {
    states: {
      inactive: {
        opacity: 0.2 // 按需调整非激活状态的透明度，不需要褪色效果就设为1
      }
    }
  },
  // 原有column配置保留即可
  column: {
    stacking: 'normal',
    column: {
      pointPadding: 0,
      borderWidth: 0,
      groupPadding: 0,
      grouping: true,
    }
  },
}

• 无法升级版本的兼容方案：如果项目受依赖限制不能升级Highcharts，可以通过事件监听手动模拟inactive效果，参考代码如下：

plotOptions: {
  scatter: {
    point: {
      events: {
        mouseOver: function() {
          const activeSeries = this.series;
          activeSeries.chart.series.forEach(series => {
            if (series !== activeSeries && series.visible) {
              series.group.attr({opacity: 0.2});
              series.markerGroup.attr({opacity: 0.2});
            }
          })
        },
        mouseOut: function() {
          this.series.chart.series.forEach(series => {
            series.group.attr({opacity: 1});
            series.markerGroup.attr({opacity: 1});
          })
        }
      }
    },
    events: {
      legendItemClick: function() {
        const chart = this.chart;
        setTimeout(() => {
          chart.series.forEach(series => {
            if (series.visible) {
              series.group.attr({opacity: 1});
              series.markerGroup.attr({opacity: 1});
            }
          })
        }, 0)
      }
    }
  }
}

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