如何在Highcharts中为图例添加Tooltip悬浮提示功能

完全可以实现该需求，你可以通过监听图例项的鼠标事件主动触发自定义Tooltip显示，具体实现逻辑和代码如下：

• 利用legend.itemEvents配置项监听图例项的鼠标进出事件
• 悬浮时获取对应数据点的自定义属性，主动触发Tooltip渲染
• 移出时隐藏Tooltip即可

完整配置代码示例：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  tooltip: {
    // 自定义Tooltip显示格式，可直接调用数据点的自定义字段
    formatter: function() {
      return `浏览器简称：${this.point.name}<br>浏览器全称：${this.point.name2}<br>市场占比：${this.y}%`
    }
  },
  legend: {
    itemEvents: {
      // 鼠标悬浮图例项触发
      mouseOver: function() {
        const chart = this.series.chart;
        // 主动渲染对应数据点的Tooltip
        chart.tooltip.refresh(this);
      },
      // 鼠标移出图例项触发
      mouseOut: function() {
        const chart = this.series.chart;
        chart.tooltip.hide();
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Chrome',
        name2: 'Google Chrome',
        y: 61.41,
        sliced: true,
        selected: true
    }, {
        name: 'Internet Explorer',
        name2: 'IE',
        y: 11.84
    }, {
        name: 'Firefox',
        name2: 'FF',
        y: 10.85
    }, {
        name: 'Edge',
        name2: 'MSE',
        y: 4.67
    }, {
        name: 'Safari',
        name2: 'AS', 
        y: 4.18
    }, {
        name: 'Unknown',
        name2: 'NA',
        y: 7.05
    }]
  }]
});

如果不需要和图表本身的悬浮Tooltip共用样式，也可以在mouseOver事件中自行实现悬浮弹层逻辑，直接读取this.name2、this.y等属性即可，灵活度很高。

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