Highcharts交互配置：仅悬停数据点高亮其余元素应用inactive状态

你可以通过自定义数据点悬停事件、手动控制各元素状态的方式实现需求，修改后的完整代码如下：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '仅单数据点高亮'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr']
  },
  plotOptions: {
    series: {
      stickyTracking: false, // 关闭系列级别的粘性追踪，避免整行联动
      states: {
        inactive: {
          enabled: true,
          opacity: 0.3 // 可自行调整非激活状态的透明度，效果更明显
        },
        hover: {
          enabled: false // 关闭默认的系列悬停高亮，避免同系列所有点同步高亮
        }
      },
      point: {
        events: {
          // 自定义点悬停事件，手动控制状态
          mouseOver: function () {
            const chart = this.series.chart;
            // 遍历所有数据点，仅保留当前点为高亮状态，其余设为非激活
            chart.series.forEach(series => {
              series.points.forEach(point => {
                point.setState(point === this ? 'hover' : 'inactive');
              })
            })
          },
          // 鼠标移出时重置所有点状态
          mouseOut: function () {
            const chart = this.series.chart;
            chart.series.forEach(series => {
              series.points.forEach(point => {
                point.setState('normal');
              })
            })
          }
        }
      }
    }
  },
  series: [{
    data: [1, 3, 2, 4]
  }, {
    data: [5, 3, 4, 2]
  }]
});

关键修改说明：

• 关闭stickyTracking和默认的系列级hover状态：从根源禁用Highcharts默认的同系列所有点联动高亮逻辑
• 自定义mouseOver事件：遍历全量数据点，仅给当前悬停的点设置hover高亮状态，其余所有点统一设置为inactive状态
• 自定义mouseOut事件：鼠标离开数据点后重置所有点的状态为正常，恢复默认展示样式

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