如何在Google Charts饼图的图例悬停时显示提示框

我完全懂你现在的困扰——饼图悬停切片时tooltip正常弹出，但移到图例上只会高亮对应切片，却不显示tooltip对吧？其实Google Charts原生并没有直接支持这个配置，但我们可以通过手动监听图例的鼠标事件，触发对应切片的tooltip显示来解决，结合你的Angular代码，我给你一步步改：

核心思路 #

Google Charts的图例元素是渲染在DOM里的，我们可以在图表加载完成后，给每个图例项绑定mouseover和mouseout事件，手动触发对应切片的鼠标悬停/离开事件，让tooltip跟着显示/隐藏。

具体代码修改 #

1. 扩展图表Ready事件的处理逻辑 #

你已经在组件里定义了onChartReady方法，我们只需要扩展它，给图例项绑定事件：

onChartReady(event: any, chartId: 'imoveis' | 'area') {
  const chart = event.chart;
  const container = chart.getContainer();
  // 获取所有图例项DOM元素
  const legendItems = container.querySelectorAll('.google-visualization-piechart-legend-item');

  // 给每个图例项绑定鼠标事件
  legendItems.forEach((item: Element, index: number) => {
    // 封装鼠标悬停的处理函数
    const handleLegendMouseOver = () => {
      // 1. 触发对应切片的mouseover事件，强制显示tooltip
      google.visualization.events.trigger(chart, 'onmouseover', {
        row: index,
        column: null // 饼图的column设为null即可
      });
      // 2. 高亮对应切片（原生其实会自动高亮，但手动调用更保险）
      chart.setSelection([{ row: index }]);
    };

    // 封装鼠标离开的处理函数
    const handleLegendMouseOut = () => {
      // 1. 触发对应切片的mouseout事件，隐藏tooltip
      google.visualization.events.trigger(chart, 'onmouseout', {
        row: index,
        column: null
      });
      // 2. 清除切片高亮（根据你的需求，也可以保留高亮，注释掉这行即可）
      chart.setSelection([]);
    };

    // 先移除旧事件避免重复绑定，再绑定新事件
    item.removeEventListener('mouseover', handleLegendMouseOver);
    item.removeEventListener('mouseout', handleLegendMouseOut);
    item.addEventListener('mouseover', handleLegendMouseOver);
    item.addEventListener('mouseout', handleLegendMouseOut);
  });
}

2. 确保Tooltip配置正确 #

你已经在图表options里设置了tooltip: { trigger: 'both' }，这个配置是对的——both表示tooltip会在鼠标悬停和选中切片时都触发，刚好配合我们手动触发的事件。如果之前没设置，一定要加上：

// 以你的pieChartImoveis为例，其他图表同理
options: {
  // ... 其他配置
  tooltip: {
    trigger: 'both' // 必须设置为both，确保手动触发的事件能唤起tooltip
  }
}

注意事项 #

• 图例项顺序：Google Charts的图例项顺序默认和你data数组的行顺序完全一致，所以index可以直接对应到data里的行，不用额外处理。
• 图表重渲染：如果你的图表会因为数据更新重新渲染，ready事件会再次触发，我们的代码会自动重新绑定事件，不用担心失效。
• 类名兼容性：.google-visualization-piechart-legend-item是Google Charts饼图图例项的默认类名，不同版本的Google Charts如果类名有变化，你可以打开浏览器开发者工具查看图例元素的类名，替换成对应的即可。

这样修改后，当你把鼠标移到图例上时，对应的tooltip就会跟着弹出来，和悬停切片时的效果完全一致啦～

内容来源于stack exchange