如何在Google Chart API中动态控制（显示和隐藏）工具提示？

Question

I am using google chart api for my web application. 我正在为我的Web应用程序使用Google Chart API。 i have to show & hide tooltip dynamically in that chart. 我必须在该图表中动态显示和隐藏工具提示。 For showing the tooltip 用于显示工具提示

 tooltip: {
     trigger: 'selection',
     textStyle: {
         fontName: 'Arial',
         fontSize: 12,
         bold: true
     }
 },
 // listener 
 var globalId;
 google.visualization.events.addListener(chart, 'select', function (args) {
     if (chart.getSelection().length > 0) {
         var selection = chart.getSelection()[0];
         var annotationTextXAxis = chartData.getValue(selection.row, 0);
         var annotationTextYAxis = chartData.getValue(selection.row, 1);
         $("#popupDatepicker").datepicker({
             yearRange: globalId + ':' + globalId
         }).val();
         globalId = annotationTextXAxis;
         inputAnnotation();
     }
 });

but in this method, tooltip showed when i click data point and hide only when i click again that data point or another data point. 但是在这种方法中，当我单击数据点时显示工具提示，而仅当我再次单击该数据点或另一个数据点时才隐藏。 I need to hide that showed tooltip if suppose i clicked somewhere else in that page. 如果假设我在该页面的其他地方单击，则需要隐藏显示的工具提示。

Answer 1

You need to create a click event handler for the <body> that tests whether the click target is a descendant of the chart or not. 您需要为<body>创建单击事件处理程序，以测试单击目标是否为图表的后代。 If it is not, clear the chart's selection: 如果不是，请清除图表的选择：

function clearSelection (e) {
    if (!document.querySelector('#myChartDiv').contains(e.srcElement)) {
        myChart.setSelection();
    }
}
if (document.addEventListener) {
    document.querySelector('body').addEventListener('click', clearSelection);
}
else if (document.attachEvent) {
    document.querySelector('body').attachEvent('onclick', clearSelection);
}

如何在Google Chart API中动态控制（显示和隐藏）工具提示？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-02-21 16:06:14

如何在Google Chart API中动态控制（显示和隐藏）工具提示？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-02-21 16:06:14

解决方案1
1 已采纳 2014-02-21 16:06:14