【问题标题】:How to show tooltip on a Google Pie Chart on legend hover?如何在图例悬停的 Google 饼图上显示工具提示?
【发布时间】:2015-05-14 09:56:16
【问题描述】:

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

目前我最接近的方法是在单击图例时显示工具提示,其中:

tooltip: { trigger: 'selection' }

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

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

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

【问题讨论】:

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


    【解决方案1】:

    你很接近。保留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/

    【讨论】:

      猜你喜欢
      • 2022-09-29
      • 2021-10-02
      • 1970-01-01
      • 2020-11-13
      • 2020-03-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多