如何在图例悬停时在Google饼图上显示工具提示?

时间:2015-05-14 09:56:17

标签: charts google-visualization legend mousehover legend-properties

我想在图例中显示鼠标悬停时切片的工具提示。 默认情况下,仅当鼠标位于饼图切片上时才显示工具提示。

目前我最接近的是当我点击图例时显示工具提示:

tooltip: { trigger: 'selection' }

当我绘制图表时作为选项。

我试图在参考文献中找到一些没有结果的东西。

JSFiddle:http://jsfiddle.net/ohavpo17/2/

1 个答案:

答案 0 :(得分:10)

你很亲密。保留tooltip: { trigger: 'selection' }并向onmouseover添加事件监听器:

google.visualization.events.addListener(chart, 'onmouseover', function(entry) {
   chart.setSelection([{row: entry.row}]);
});

当鼠标悬停在图例上时,将显示工具提示。正如docs所说onmouseover

  

当用户将鼠标悬停在可视实体上时触发。将行传回   和相应数据表元素的列索引。切片或   图例条目与数据表中的一行相关联(列索引为   空)。

因此,上面的代码只是简单地模拟了与正在悬停的图例相对应的行的选择。我还会添加一个onmouseout侦听器,因此当鼠标离开图表时,工具提示不会挂起:

google.visualization.events.addListener(chart, 'onmouseout', function(entry) {
   chart.setSelection([]);
});   

参见演示 - >的 http://jsfiddle.net/a095qq8e/