如何通过positioner设置共享tooltip使其定位在数据点上方？

核心思路 #

通过自定义tooltip.positioner函数，计算所有共享数据点的水平中点，结合Tooltip自身尺寸调整位置，确保它居中显示在数据点组的正上方，同时处理边界溢出问题。

代码实现 #

tooltip: {
  shared: true,
  // 可选：如果需要Tooltip允许超出图表容器，开启此项
  // outside: true,
  positioner: function(labelWidth, labelHeight, point) {
    const hoverPoints = this.chart.hoverPoints;
    if (!hoverPoints || hoverPoints.length === 0) return { x: 0, y: 0 };

    // 计算所有数据点的水平中点
    const totalX = hoverPoints.reduce((sum, p) => sum + p.plotX, 0);
    const centerX = totalX / hoverPoints.length;
    // 水平位置：中点减去Tooltip宽度的一半，实现居中
    let x = centerX - labelWidth / 2;

    // 取最上方数据点的Y坐标，让Tooltip定位在所有数据点的上方
    const topPointY = Math.min(...hoverPoints.map(p => p.plotY));
    // 垂直位置：向上偏移Tooltip高度+间距
    let y = topPointY - labelHeight - 10;

    // 处理边界溢出（适配outside模式和常规模式）
    const chart = this.chart;
    if (this.options.outside) {
      // outside模式下，限制Tooltip在图表容器内
      x = Math.max(chart.plotLeft, Math.min(x, chart.plotLeft + chart.plotWidth - labelWidth));
      // 如果顶部空间不足，将Tooltip移到数据点下方
      if (y < chart.plotTop) {
        y = topPointY + 10;
      }
    } else {
      // 常规模式下，限制在绘图区内
      x = Math.max(0, Math.min(x, chart.plotWidth - labelWidth));
      y = Math.max(0, y);
    }

    return { x, y };
  }
}

关键逻辑说明 #

• 水平居中：通过plotX（数据点在绘图区内的水平相对坐标）的平均值，得到数据组的水平中点，再调整Tooltip位置让其居中对齐。
• 垂直定位：取所有数据点中最靠上的plotY值，向上偏移Tooltip高度和自定义间距，确保Tooltip在数据点上方。
• 边界适配：针对outside: true的场景，检查Tooltip是否超出图表容器，若顶部空间不足则自动移到数据点下方，左右超出则贴紧容器边缘。

可调整项 #

• 代码中的10是Tooltip与数据点的间距，可根据视觉需求修改。
• 如果是特殊布局（如堆叠图），可调整centerX或topPointY的计算逻辑，适配实际数据分布。

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