如何让Highcharts柱状图实现图例悬停时对应柱子高亮效果？

阿华AIGC实验室

2026-5-29

实现Highcharts柱状图悬停图例时高亮对应柱子

嘿，这个需求其实很容易搞定，要么靠Highcharts自带的配置，要么手动绑定一点事件就能实现，完全能做到和你折线图一样的效果，甚至让柱子的高亮状态和直接悬停时完全一致。

核心思路

要达成这个效果，关键是让悬停图例项的动作，能触发对应柱状图系列的hover状态——而这个状态的样式你已经在直接悬停柱子时配置好了（毕竟你说直接悬停柱子有高亮），所以只需要把这两个动作关联起来就行。

方法一：利用Highcharts默认配置（简单快捷）

Highcharts默认会在悬停图例项时，尝试触发对应系列的hover状态，只要你正确配置了柱子的悬停样式，大概率直接生效：

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  legend: {
    // 配置图例项悬停时的文字样式，给用户交互反馈
    itemHoverStyle: {
      color: '#2c3e50',
      fontWeight: 'bold'
    }
  },
  plotOptions: {
    column: {
      states: {
        hover: {
          // 这里配置和你直接悬停柱子时完全一致的样式
          color: '#e74c3c',
          brightness: 0.1,
          borderWidth: 2,
          borderColor: '#c0392b'
        }
      }
    }
  },
  series: [
    { name: '销售额', data: [120, 150, 180, 220, 200] },
    { name: '利润', data: [30, 45, 55, 70, 65] },
    { name: '成本', data: [90, 105, 125, 150, 135] }
  ]
});

如果这个方法没生效（比如某些版本的Highcharts对柱状图的默认关联没开启），可以试试下面的手动绑定方法，更可靠。

方法二：手动绑定图例事件（稳定可靠）

通过监听图例项的mouseover和mouseout事件，手动触发对应系列的hover/normal状态，确保100%生效：

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        const chart = this;
        // 遍历所有图例项，绑定事件
        chart.legend.allItems.forEach(item => {
          const targetSeries = item.series;
          // 悬停图例时，触发系列的hover状态
          item.legendItem.on('mouseover', () => {
            targetSeries.setState('hover');
          });
          // 移出图例时，恢复系列的正常状态
          item.legendItem.on('mouseout', () => {
            targetSeries.setState('normal');
          });
        });
      }
    }
  },
  legend: {
    itemHoverStyle: {
      color: '#2980b9',
      fontWeight: 'bold'
    }
  },
  plotOptions: {
    column: {
      states: {
        hover: {
          // 完全复用你直接悬停柱子时的样式配置
          color: '#f39c12',
          brightness: 0.2,
          borderWidth: 2,
          borderColor: '#d35400'
        }
      }
    }
  },
  series: [
    { name: '销售额', data: [120, 150, 180, 220, 200] },
    { name: '利润', data: [30, 45, 55, 70, 65] },
    { name: '成本', data: [90, 105, 125, 150, 135] }
  ]
});