Highcharts饼/环形图Tooltip显示在图表外圈的实现问题

核心思路 #

通过基于饼图扇区角度的动态定位结合图表容器的相对尺寸计算，让Tooltip始终显示在扇区外侧，同时避开图表交互区域，自动适配不同分辨率。

修改后的完整Tooltip配置（替换原Tooltip部分） #

tooltip: {
  padding: 0,
  borderRadius: 4,
  followPointer: false,
  outside: true,
  useHTML: true,
  formatter: function(tooltip) {
    let goal = stats?.allocated_space_credits.find(item => item?.space?.name == this?.point?.name);
    return `<div class="chart-tooltip">
      <div class="head">${this.point.name}</div>
      <div class="body">
        <div class="content-row">
          <div class="title">Credit allocated: </div>
          <div class="count">${this.point.y}</div>
        </div>
        ${ goal?.space?.space_goals?.length ? `<div class="content-row">
            <div class="title">Goal: </div>
            <div class="tag-wrapper">
              ${goal?.space?.space_goals?.map((item, idx) => `<span class="custom-tag">${item?.['name']}</span>`).join('')}
            </div>
        </div>` : '' }
      </div>
    </div>`
  },
  positioner: function(labelWidth, labelHeight, point) {
    const chart = this.chart;
    const plotLeft = chart.plotLeft;
    const plotTop = chart.plotTop;
    const plotWidth = chart.plotWidth;
    const plotHeight = chart.plotHeight;
    // 扇区中心角度（0=正右方，顺时针递增）
    const angle = point.angle;
    // 固定偏移量，避免Tooltip贴紧扇区
    const offset = 10;
    let x, y;

    // 根据角度判断扇区象限，动态分配Tooltip位置
    if (angle >= 0 && angle < 90) {
      // 右下象限：Tooltip放在扇区右下方
      x = point.plotX + offset;
      y = point.plotY + offset;
      // 避免超出容器右侧
      if (x + labelWidth > plotLeft + plotWidth) {
        x = plotLeft + plotWidth - labelWidth - offset;
      }
      // 避免超出容器底部
      if (y + labelHeight > plotTop + plotHeight) {
        y = plotTop + plotHeight - labelHeight - offset;
      }
    } else if (angle >= 90 && angle < 180) {
      // 左下象限：Tooltip放在扇区左下方
      x = point.plotX - labelWidth - offset;
      y = point.plotY + offset;
      // 避免超出容器左侧
      if (x < plotLeft) {
        x = plotLeft + offset;
      }
      // 避免超出容器底部
      if (y + labelHeight > plotTop + plotHeight) {
        y = plotTop + plotHeight - labelHeight - offset;
      }
    } else if (angle >= 180 && angle < 270) {
      // 左上象限：Tooltip放在扇区左上方
      x = point.plotX - labelWidth - offset;
      y = point.plotY - labelHeight - offset;
      // 避免超出容器左侧
      if (x < plotLeft) {
        x = plotLeft + offset;
      }
      // 避免超出容器顶部
      if (y < plotTop) {
        y = plotTop + offset;
      }
    } else {
      // 右上象限：Tooltip放在扇区右上方
      x = point.plotX + offset;
      y = point.plotY - labelHeight - offset;
      // 避免超出容器右侧
      if (x + labelWidth > plotLeft + plotWidth) {
        x = plotLeft + plotWidth - labelWidth - offset;
      }
      // 避免超出容器顶部
      if (y < plotTop) {
        y = plotTop + offset;
      }
    }

    return { x, y };
  },
},

关键优化说明 #

1. 角度驱动定位：利用饼图扇区自带的point.angle属性，精准判断扇区在图表中的位置，确保Tooltip始终指向扇区外侧。
2. 边界自适应：通过图表的plotLeft/plotTop/plotWidth/plotHeight获取容器尺寸，自动修正Tooltip坐标，避免超出容器范围或遮挡图表。
3. 细节修复：补充原formatter中map方法后的join('')，避免标签之间出现多余逗号。

额外适配建议 #

• 若底部Tooltip仍有遮挡，可给chart配置添加底部边距：

  chart: {
    // 原有配置
    marginBottom: 80
  }
  

• 通过CSS限制Tooltip最大宽度，避免过宽导致布局混乱：

  .chart-tooltip {
    max-width: 220px;
  }
  

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