如何从外部URL触发Google Chart指定数据点的Tooltip？

问题核心：setSelection()仅会标记数据点为选中状态，但代码触发的选中不会自动触发Tooltip——即便tooltip.trigger设为"both"，该属性仅对用户交互触发的选中/hover生效。

以下是两种可行的解决方案：

方案1：模拟鼠标Hover事件（通用兼容） #

通过定位目标数据点的DOM元素，模拟mouseover事件触发Tooltip，适配绝大多数Google Charts版本：

const urlParams = new URLSearchParams(window.location.search);
const showTooltip = urlParams.get('showTooltip');
if (showTooltip) {
  google.visualization.events.addListener(scatterChart, 'ready', function() {
    showTooltipForEntry(showTooltip);
    // ready事件已确保图表渲染完成，可移除不必要的setTimeout
  });
}

function showTooltipForEntry(entryName) {
  // 根据标识列找到目标行索引
  const rowIndex = data.getFilteredRows([{
    column: 1,
    value: entryName
  }])[0];
  if (rowIndex === undefined) return;

  const chartWrapper = scatterChart;
  const chart = chartWrapper.getChart();
  // 替换为散点图实际的数值列索引（如x轴/y轴对应的列，而非标识列）
  const targetColumn = 2;

  // 设置选中状态
  chart.setSelection([{ row: rowIndex, column: targetColumn }]);

  // 定位目标数据点的DOM元素
  const svg = chartWrapper.getContainer().querySelector('svg');
  // Google Charts会给SVG元素添加data-row和data-column属性用于定位
  const pointElement = svg.querySelector(`circle[data-row="${rowIndex}"][data-column="${targetColumn}"]`);
  
  if (pointElement) {
    // 模拟mouseover事件触发Tooltip
    const mouseOverEvent = new MouseEvent('mouseover', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    pointElement.dispatchEvent(mouseOverEvent);
  }
}

方案2：调用图表内部触发方法（更简洁） #

利用Google Charts实例的内部trigger方法直接触发onmouseover事件，代码更简洁，但需注意版本兼容性：

const urlParams = new URLSearchParams(window.location.search);
const showTooltip = urlParams.get('showTooltip');
if (showTooltip) {
  google.visualization.events.addListener(scatterChart, 'ready', function() {
    showTooltipForEntry(showTooltip);
  });
}

function showTooltipForEntry(entryName) {
  const rowIndex = data.getFilteredRows([{
    column: 1,
    value: entryName
  }])[0];
  if (rowIndex === undefined) return;

  const chart = scatterChart.getChart();
  // 替换为散点图实际的数值列索引
  const targetColumn = 2;

  // 设置选中状态
  chart.setSelection([{ row: rowIndex, column: targetColumn }]);
  // 直接触发内部mouseover事件
  chart.trigger('onmouseover', { row: rowIndex, column: targetColumn });
}

关键注意事项 #

• 目标列索引：必须指定散点图的数值列（如x/y轴对应的列），而非仅用于筛选的标识列，否则无法定位到可视化的数据点。
• 延迟调整：若仍存在DOM元素未加载的问题，可尝试添加100-200ms的短延迟，但ready事件已确保图表渲染完成，通常无需额外延迟。
• Tooltip配置验证：确保图表配置中tooltip: { trigger: 'both' }已正确设置。

内容的提问来源于stack exchange，提问作者Björn