Google散点图多提示框重叠问题：寻求解决方案

我之前做项目时也碰到过一模一样的Google Charts Tooltip重叠问题，结合官方文档和实际测试，给你分享几个实用的解决方案：

1. 自定义Tooltip位置（最推荐） #

利用Google Charts提供的tooltip.positioner配置函数，你可以根据每个选中数据点的索引、坐标等信息，动态调整Tooltip的显示位置，从根源上避免重叠。

代码示例： #

function drawScatterChart() {
  // 你的数据和基础配置...
  const options = {
    tooltip: {
      trigger: 'selection',
      positioner: function(box, point) {
        // 根据选中点的索引，给每个Tooltip设置不同的偏移量
        // 这里的25px、15px可以根据你的Tooltip尺寸灵活调整
        const offsetX = point.index * 25;
        const offsetY = point.index * 15;
        return {
          x: point.x + offsetX,
          y: point.y - offsetY
        };
      }
    },
    aggregationTarget: 'none',
    selectionMode: 'multiple'
    // 其他配置...
  };

  // 绘制图表并设置默认选中
  const chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  // 默认选中前3个点的示例
  chart.setSelection([{row:0}, {row:1}, {row:2}]);
}

优化思路： #

如果数据点的横向/纵向距离本身有差异，还可以在positioner里判断点的坐标差，动态调整偏移方向：比如两个点x坐标接近就纵向偏移，y坐标接近就横向偏移，这样适配性更强。

2. 使用HTML Tooltip + 自定义CSS样式 #

开启tooltip.isHtml: true后，你可以完全自定义Tooltip的HTML结构和CSS样式，通过给不同索引的Tooltip设置不同的外边距或定位，实现错开显示。

代码示例： #

const options = {
  tooltip: {
    trigger: 'selection',
    isHtml: true,
    formatter: function(context) {
      // 给每个Tooltip添加带索引的类名
      return `<div class="custom-tooltip tooltip-${context.row}">
                <p>X: ${context.data[0]}</p>
                <p>Y: ${context.data[1]}</p>
              </div>`;
    }
  },
  aggregationTarget: 'none',
  selectionMode: 'multiple'
};

然后添加CSS样式：

.custom-tooltip {
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  position: absolute;
}

/* 给不同索引的Tooltip设置不同的偏移 */
.tooltip-0 { margin-left: 0; margin-top: 0; }
.tooltip-1 { margin-left: 30px; margin-top: 20px; }
.tooltip-2 { margin-left: 60px; margin-top: 40px; }

3. 调整默认选中点的分布（业务允许的情况下） #

如果业务需求对默认选中的点没有强制要求，可以优先选择位置分散的数据点进行默认选中，从源头减少重叠概率。不过这个方法局限性比较大，只适合灵活度高的场景。

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