如何在图例悬停时在 Google 饼图上显示工具提示?
How to show tooltip on a Google Pie Chart on legend hover?
我想在图例中显示鼠标悬停时切片的工具提示。
默认情况下,它仅在鼠标悬停在饼图的一部分上时才显示工具提示。
目前我最接近的是在单击图例时显示工具提示,其中:
tooltip: { trigger: 'selection' }
作为我绘制图表时的选项。
我试图在参考中找到一些东西,但没有结果。
JSFiddle:http://jsfiddle.net/ohavpo17/2/
你很接近。保留 tooltip: { trigger: 'selection' }
并向 onmouseover
添加一个事件侦听器:
google.visualization.events.addListener(chart, 'onmouseover', function(entry) {
chart.setSelection([{row: entry.row}]);
});
这将在鼠标悬停在图例上时显示工具提示。正如 docs 所说 onmouseover
:
Fired when the user mouses over a visual entity. Passes back the row
and column indices of the corresponding data table element. A slice or
legend entry correlates to a row in the data table (column index is
null).
所以上面的代码简单地模拟了对与悬停的图例对应的行的选择。我还会添加一个 onmouseout
侦听器,因此当鼠标离开图表时工具提示不会挂起:
google.visualization.events.addListener(chart, 'onmouseout', function(entry) {
chart.setSelection([]);
});
查看演示 -> http://jsfiddle.net/a095qq8e/
我想在图例中显示鼠标悬停时切片的工具提示。 默认情况下,它仅在鼠标悬停在饼图的一部分上时才显示工具提示。
目前我最接近的是在单击图例时显示工具提示,其中:
tooltip: { trigger: 'selection' }
作为我绘制图表时的选项。
我试图在参考中找到一些东西,但没有结果。
JSFiddle:http://jsfiddle.net/ohavpo17/2/
你很接近。保留 tooltip: { trigger: 'selection' }
并向 onmouseover
添加一个事件侦听器:
google.visualization.events.addListener(chart, 'onmouseover', function(entry) {
chart.setSelection([{row: entry.row}]);
});
这将在鼠标悬停在图例上时显示工具提示。正如 docs 所说 onmouseover
:
Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element. A slice or legend entry correlates to a row in the data table (column index is null).
所以上面的代码简单地模拟了对与悬停的图例对应的行的选择。我还会添加一个 onmouseout
侦听器,因此当鼠标离开图表时工具提示不会挂起:
google.visualization.events.addListener(chart, 'onmouseout', function(entry) {
chart.setSelection([]);
});
查看演示 -> http://jsfiddle.net/a095qq8e/