Highcharts饼图如何实现图例点击同悬停一致的高亮效果

核心逻辑 #

直接复用Highcharts内置的状态管理能力，不需要手动计算透明度、扇区缩放值，零额外样式兼容成本，完全对齐原生悬停效果。

实现代码 #

1. 首先拦截图例默认点击行为，废弃默认的扇区隐藏逻辑
2. 点击图例时调用扇区内置状态方法，触发和悬停完全一致的高亮/模糊效果
3. 调用内置tooltip方法展示对应提示框，不需要自行实现定位、内容渲染

Highcharts.chart('container', {
  // 其余配置项保持不变
  plotOptions: {
    pie: {
      point: {
        events: {
          legendItemClick: function () {
            const chart = this.series.chart;
            // 重置所有扇区为默认状态，清除上一次点击的高亮效果
            chart.series.forEach(series => {
              series.points.forEach(point => point.setState('normal'));
            });
            // 当前扇区设置为hover态，自动触发其他扇区的inactive模糊效果
            this.setState('hover');
            // 触发对应tooltip展示，和悬停效果完全一致
            chart.tooltip.refresh(this);
            // 阻止默认的扇区显隐逻辑
            return false;
          }
        }
      }
    }
  }
});

可选补充配置 #

如果需要点击图表非图例区域时取消高亮状态，可以追加全局点击监听：

chart: {
  events: {
    render: function() {
      const chart = this;
      if (!chart.container.dataset.legendClickBinded) {
        chart.container.addEventListener('click', (e) => {
          // 判断点击目标不在图例范围内时重置状态
          if (!e.target.closest('.highcharts-legend')) {
            chart.series.forEach(series => {
              series.points.forEach(point => point.setState('normal'));
            });
            chart.tooltip.hide();
          }
        });
        chart.container.dataset.legendClickBinded = 'true';
      }
    }
  }
}

效果说明 #

• 点击图例时不会隐藏对应扇区，完全替换默认的点击显隐行为
• 高亮扇区的缩放、描边效果和原生悬停完全一致
• 其余扇区的模糊透明度效果直接沿用你已配置的inactive态样式，不需要额外编写样式逻辑
• tooltip的位置、内容、动画和悬停触发的效果完全对齐

如果你自定义过图例的悬停逻辑，这套方案不会和原有逻辑冲突，所有原生交互逻辑都保持不变。如果是多系列饼图，上述遍历系列重置状态的逻辑可以直接兼容，不需要额外修改。

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