Highcharts笛卡尔图开启followPointer时如何显示Tooltip箭头

我之前也纠结过这个问题——Highcharts默认开启followPointer时就把tooltip的箭头藏起来了，官方文档也没直接给开关，后来摸索出两个可行的方案：

这个方法是利用Highcharts的renderer API手动绘制一个箭头，让它跟着tooltip移动。好处是不用修改源码，兼容性好，适合大多数场景。

具体实现思路：

• 在图表加载完成后，监听tooltip容器的鼠标移动事件
• 每次移动时，先移除之前的箭头元素，避免重复绘制
• 获取当前tooltip的位置和尺寸，计算箭头的坐标
• 用renderer.path绘制三角形箭头，样式和tooltip保持一致

代码示例：

Highcharts.chart('container', {
  tooltip: {
    followPointer: true,
    backgroundColor: '#2f3b4c',
    borderWidth: 0,
    padding: 10
  },
  chart: {
    load: function() {
      const chart = this;
      let arrowEl;

      // 监听tooltip容器的鼠标移动（followPointer开启时tooltip随鼠标移动）
      chart.tooltip.container.addEventListener('mousemove', () => {
        // 移除旧箭头
        if (arrowEl) {
          arrowEl.destroy();
        }

        // 获取tooltip的位置与尺寸信息
        const tooltipBBox = chart.tooltip.label.getBBox();
        // 计算箭头位置（这里以tooltip底部中间为例，可按需调整方向）
        const arrowX = tooltipBBox.x + tooltipBBox.width / 2;
        const arrowY = tooltipBBox.y + tooltipBBox.height;

        // 绘制三角形箭头
        arrowEl = chart.renderer.path([
          'M', arrowX, arrowY,
          'L', arrowX - 7, arrowY + 8,
          'L', arrowX + 7, arrowY + 8,
          'Z'
        ])
        .attr({
          fill: chart.tooltip.options.backgroundColor,
          zIndex: 999 // 确保箭头在tooltip下方显示
        })
        .add();
      });
    }
  },
  // 其他图表基础配置
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  series: [{
    name: 'Data',
    data: [1, 3, 2, 4, 5, 7, 6]
  }]
});

如果需要适配鼠标在图表边缘时的tooltip偏移情况，可以额外判断鼠标坐标，调整箭头的绘制位置（比如改到tooltip顶部、左侧或右侧）。

如果你的项目不会频繁升级Highcharts，也可以直接修改源码中隐藏箭头的逻辑。

找到Highcharts的Tooltip模块代码，定位到updatePosition方法，里面有一段判断followPointer的逻辑：

if (this.followPointer) {
  this.label.attr({
    x: pos.x,
    y: pos.y
  });
  this.arrow.hide(); // 就是这行代码把箭头隐藏了
} else {
  // 非followPointer模式下的位置处理逻辑
}

把this.arrow.hide()这行注释掉或者直接删除，这样开启followPointer时箭头就会正常显示了。

注意：修改源码后，后续升级Highcharts版本时需要重新做这个修改，否则会失效。

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