如何禁用Highcharts中Total图例项hover时的系列低透明度状态？

针对你遇到的Safari下“Total”图例无法交互，且设为visible: true后会触发其他系列低透明度的问题，可通过以下方式解决：

核心思路 #

1. 保持visible: true确保Safari中“Total”图例可点击/hover；
2. 让“Total”系列不在图表上渲染任何元素；
3. 重写图例的hover事件，跳过“Total”项触发的默认系列透明度变化逻辑；
4. 保留自定义的“Total”点击回调。

代码实现 #

系列配置 #

const series = [
  {
    name: 'Create',
    data: [3, 6, 2, 8, 18],
  },
  {
    name: 'Update',
    data: [6, 8, 9, 3, 10],
  },
  {
    name: 'Delete',
    data: [14, 8, 9, 17, 7],
  },
  {
    name: 'Total',
    data: [], // 空数据，不渲染图形元素
    enableMouseTracking: false, // 禁用该系列的鼠标跟踪，避免图表上的无效交互
    visible: true, // 确保Safari图例可交互
    showInLegend: true,
    legendItemClick: function() {
      // 自定义Total点击逻辑：计算所有系列数据总和
      const total = this.chart.series.reduce((sum, s) => {
        if (s.name !== 'Total') {
          return sum + s.data.reduce((dSum, d) => dSum + d.y, 0);
        }
        return sum;
      }, 0);
      console.log(`Total: ${total}`);
      return false; // 阻止默认的显示/隐藏行为（Total无数据可展示）
    }
  },
];

图表配置（重写图例hover事件） #

Highcharts.chart('container', {
  // 其他基础配置（如xAxis、yAxis等）
  series: series,
  legend: {
    itemMouseOver: function(e) {
      // 仅当hover的不是Total项时，执行默认的系列透明度变化
      if (e.target.textStr !== 'Total') {
        const defaultHandler = Highcharts.Legend.prototype.itemMouseOver;
        defaultHandler.call(this, e);
      }
    },
    itemMouseOut: function(e) {
      // 仅当离开的不是Total项时，执行默认的透明度恢复逻辑
      if (e.target.textStr !== 'Total') {
        const defaultHandler = Highcharts.Legend.prototype.itemMouseOut;
        defaultHandler.call(this, e);
      }
    }
  }
});

关键说明 #

• data: []和enableMouseTracking: false：确保“Total”系列不会在图表上生成任何可交互的图形元素，仅保留图例项；
• 重写itemMouseOver/itemMouseOut：避免hover“Total”图例时，其他系列触发默认的低透明度状态；
• legendItemClick返回false：阻止Highcharts默认的系列显示/隐藏行为，因为“Total”没有实际数据可切换。

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