Question

我正在使用谷歌图表api作为我的网络应用程序。我必须展示＆amp;在该图表中动态隐藏工具提示。用于显示工具提示

 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();
     }
 });

但是在这种方法中，工具提示显示当我点击数据点并仅在我再次点击该数据点或其他数据点时隐藏。如果我想点击该页面中的其他位置，我需要隐藏显示工具提示。

Answer 1

您需要为<body>创建一个单击事件处理程序，用于测试单击目标是否是图表的后代。如果不是，请清除图表的选择：

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);
}

如何在谷歌图表API中动态控制（显示和隐藏）工具提示？

1 个答案: