如何为Highcharts图例设置悬浮提示tooltip？

实现思路：先完成图例文本的溢出截断基础配置，再绑定悬浮事件展示完整内容，以下提供两种可直接落地的实现方式：

方案1：原生title属性实现（配置最简） #

• 先设置图例项的固定宽度，开启溢出省略规则
• 通过itemFormatter给每个图例项的文本节点添加title属性，属性值为完整的图例文本

Highcharts.chart('container', {
  // 图表基础配置、series配置等省略
  legend: {
    itemStyle: {
      width: 120, // 可根据页面可用空间自定义截断宽度
      textOverflow: 'ellipsis',
      overflow: 'hidden'
    },
    itemFormatter: function() {
      // 特殊场景注意：如果图例名称包含引号、HTML特殊字符，需先对this.name做转义处理
      return `<span title="${this.name}">${this.name}</span>`;
    }
  }
});

该方案优势：配置量极小，无需额外事件处理，兼容性好，不需要额外修改样式即可直接使用。

方案2：Highcharts 统一风格Tooltip实现（样式适配性强） #

如果需要提示框样式和图表本身的Tooltip风格保持一致，可通过监听图例项的鼠标事件调用Highcharts内置Tooltip方法实现：

Highcharts.chart('container', {
  // 图表基础配置、series配置等省略
  legend: {
    itemStyle: {
      width: 120,
      textOverflow: 'ellipsis',
      overflow: 'hidden'
    },
    events: {
      afterRender: function() {
        const legend = this;
        // 遍历所有图例项绑定悬浮事件
        legend.allItems.forEach(item => {
          // 鼠标移入显示带完整名称的Tooltip
          item.legendItem.on('mouseover', e => {
            legend.chart.tooltip.label.attr({
              text: item.name
            });
            legend.chart.tooltip.show();
          });
          // 鼠标移出隐藏Tooltip
          item.legendItem.on('mouseout', e => {
            legend.chart.tooltip.hide();
          });
        });
      }
    }
  },
  tooltip: {
    // 可自定义Tooltip样式，和图表全局风格保持一致
    style: {
      fontSize: '12px',
      color: '#333'
    }
  }
});

该方案优势：提示框样式可完全自定义，支持额外附加展示更多维度信息，和图表整体UI风格统一。

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