如何实现鼠标悬停关联系列时不高亮原始系列？

要实现悬停子系列时仅高亮当前系列，不触发关联主系列及其他项目系列的高亮，需从Highcharts的事件监听和系列状态控制入手，以下是具体实现方案：

核心思路 #

1. 彻底禁用主系列的悬停高亮状态，避免子系列联动触发
2. 通过mouseOver和mouseOut事件手动控制当前子系列的高亮，同时强制重置其他所有系列的状态为正常

完整代码示例 #

// 第一个项目及其子项目
const firstSeriesA: Highcharts.SeriesLineOptions = {
  name: 'Pokemon Sapphire',
  color: 'blue',
  id: 'pokemon_sapphire',
  marker: 'circle',
  type: 'line',
  states: {
    hover: {
      enabled: false // 禁用主系列的悬停高亮
    }
  }
};

const seriesOptionsA: Highcharts.SeriesLineOptions[] = [
  firstSeriesA,
  {
    color: 'blue',
    id: 'pokemon_sapphire_v1',
    marker: 'circle',
    type: 'line',
    linkedTo: 'pokemon_sapphire',
    // 添加鼠标事件控制高亮逻辑
    events: {
      mouseOver: function() {
        // 高亮当前子系列
        this.setState('hover');
        // 遍历所有系列，重置非当前系列的状态
        this.chart.series.forEach(series => {
          if (series.id !== this.id) {
            series.setState('normal');
          }
        });
      },
      mouseOut: function() {
        // 鼠标离开时恢复当前系列的正常状态
        this.setState('normal');
      }
    }
  },
];

// 第二个项目及其子项目
const firstSeriesB: Highcharts.SeriesLineOptions = {
  name: 'Pokemon Ruby',
  color: 'red',
  id: 'pokemon_ruby',
  marker: 'square',
  type: 'line',
  states: {
    hover: {
      enabled: false
    }
  }
};

const seriesOptionsB: Highcharts.SeriesLineOptions[] = [
  firstSeriesB,
  {
    color: 'red',
    id: 'pokemon_ruby_v1',
    marker: 'square',
    type: 'line',
    linkedTo: 'pokemon_ruby',
    events: {
      mouseOver: function() {
        this.setState('hover');
        this.chart.series.forEach(series => {
          if (series.id !== this.id) {
            series.setState('normal');
          }
        });
      },
      mouseOut: function() {
        this.setState('normal');
      }
    }
  },
];

// 合并所有项目和子项目
const seriesOptions: Highcharts.SeriesLineOptions[] = [
  ...seriesOptionsA,
  ...seriesOptionsB,
];

关键说明 #

• 主系列设置states.hover.enabled: false，确保无论何种场景都不会被高亮
• 子系列的mouseOver事件强制只保留当前系列的悬停状态，彻底切断跨系列的联动高亮
• mouseOut事件负责清理当前系列的高亮状态，避免残留异常样式

可选优化 #

如果需要保留主系列自身的悬停交互（仅直接悬停主系列时高亮），可以给主系列补充事件逻辑：

firstSeriesA.events = {
  mouseOver: function() {
    this.setState('hover');
  },
  mouseOut: function() {
    this.setState('normal');
  }
};

这样既满足子系列的独立高亮需求，又不影响主系列自身的交互体验。

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