Highcharts中点击按钮修改特定数据点Tooltip的问题

我在Highcharts的Tooltip中添加了按钮，希望点击按钮时仅修改对应数据点的Tooltip内容，但当前代码点击按钮后会修改所有数据点的Tooltip，尝试使用point.update方法也未生效。

问题原因 #

• 直接调用chart.update修改全局tooltip formatter，会覆盖原有配置，导致所有数据点的Tooltip都被修改
• point.update无法直接设置数据点的tooltip配置，因为tooltip属于图表/系列级别的全局配置，并非数据点自身属性

解决方案 #

核心思路是给需要自定义的数据点添加专属标记，在全局tooltip formatter中根据标记返回对应内容：

1. 给目标数据点添加自定义属性（比如customTooltip），用于存储自定义的Tooltip内容
2. 修改全局tooltip的formatter函数，判断当前数据点是否存在自定义属性，存在则返回自定义内容，否则返回默认内容
3. 点击按钮时，定位到对应数据点，设置其自定义属性，再手动触发Tooltip重新渲染

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts Editable Data Label</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
</body>
</html>

JS代码 #

Highcharts.AST.bypassHTMLFiltering = true;
const chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  tooltip: {
    useHTML: true,
    formatter: function() {
      // 如果数据点有自定义Tooltip内容，直接返回
      if (this.point.customTooltip) {
        return this.point.customTooltip;
      }
      // 默认Tooltip内容
      return `<b>${this.series.name}</b><br/>` +
        `${Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)}<br/>` +
        `${Highcharts.numberFormat(this.y, 2)}<br/>` +
        `<button onclick="changeTooltip(${this.point.index})">Change Tooltip</button>`;
    },
    style: {
      pointerEvents: 'auto'
    }
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

// 修改指定数据点的Tooltip内容
function changeTooltip(pointIndex) {
  const targetPoint = chart.series[0].points[pointIndex];
  // 给数据点添加自定义Tooltip内容
  targetPoint.customTooltip = `自定义Tooltip：第${pointIndex + 1}个数据点`;
  // 手动触发Tooltip重新渲染（如果当前Tooltip正显示该点）
  if (chart.tooltip.activePoints && chart.tooltip.activePoints.includes(targetPoint)) {
    chart.tooltip.refresh(targetPoint);
  }
}

说明 #

• 通过给数据点添加customTooltip自定义属性，实现单个数据点的Tooltip内容独立控制
• 全局formatter会自动判断每个数据点是否有自定义内容，无需修改全局配置
• 点击按钮后如果当前Tooltip正显示该数据点，调用tooltip.refresh实时更新显示内容

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