(谷歌图表）我想在鼠标悬停时在工具提示中显示折线图 Y 值

(google charts) I want to show linechart Y-value in a tooltip on mouseover?

本文关键字：工具提示 显示 折线图 悬停 鼠标 谷歌      更新时间：2023-09-26

我如何实现这样的鼠标悬停效果，以至于每当鼠标悬停在折线图上时，它都会在悬停的 X 上的工具提示中显示每行 Y 值？

那么，最后通过将鼠标移到图表上，它应该始终显示一个工具提示，该工具提示会根据更改的 X 不断更新 Y 值？现在它仅在 X 刻度步骤上显示工具提示，例如 2010、2011、2012、2013、2014...

我现在没有时间编写完整的解决方案，但我可以尝试根据您需要的与 Google 图表 API 直接相关的部分为您指明正确的方向。

没有一个简单的解决方案

首先，我想非常清楚地说明，据我所知，Google Charts API中没有内置一个简单的解决方案。您对此所做的任何操作都将涉及呈现您自己的工具提示元素，将其定位到鼠标位置，以及自己用数据填充工具提示。

你选择的JavaScript框架可能会有很大帮助。 大多数都有插件或模块来处理鼠标悬停和鼠标位置检测，尽管我不能特别推荐任何插件或模块，因为我还没有尝试过这个。

图表布局界面

获取属于鼠标位置的数据值所需的是图表布局界面。 您可以按如下方式获取此信息：

// create a line chart and set up a variable to store your interface
// on outside the scope of your ready handler, so you can use the
// interface in your mouse event code.
var layoutInterface;
var chart = new google.visualization.LineChart(document.getElementById('container-id'));
// set up a handler for the chart's ready event
// the chart layout interface is not available until the chart has
// been drawn
var readyHandler = function(){
  layoutInterface = chart.getChartLayoutInterface();
};
// register the event handler
google.visualization.events.addListener(chart, 'ready', readyHandler);

我从这里的演示中学到了这一点。

您将使用布局界面上的getHAxisValue(xCoordinate)和getVAxisValue(yCoordinate)方法来获取与图表的 x 和 y 坐标相对应的数据值。 坐标相对于图表的容器元素。有关布局界面上可用方法的信息，请参阅折线图文档。

鼠标事件处理

其中的鼠标处理部分超出了我的知识范围，但我知道这是可能的。我认为您需要在图表的容器元素上注册一个mouse enter事件处理程序，然后该处理程序将注册一个mouse move，并在同一元素上注册mouse exit。 mouse exit将在工具提示元素上设置display:none，并取消注册mouse move处理程序。 mouse move处理程序会将工具提示元素的绝对位置设置为鼠标位置，并将其内容设置为从图表布局界面检索的值。

祝你好运！

相关文章：