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

Question

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

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

Answer 1

目前，我没有时间编写完整的解决方案，但是我可以根据您需要的与Google Charts 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处理程序会将工具提示元素的绝对位置设置为鼠标位置，并将其内容设置为从图表布局界面检索的值。

祝好运！