Question

在有人打算重复我的问题之前，我想让你知道我发现了同样的问题here但是我仍然在混淆它是如何工作的，我只是编码的初学者。< / p>

我想问任何人有关如何在geochart上关闭工具提示的完整工作版本代码或jsfiddle示例。

我试过

document.getElementByClassName("google-visualization-tooltip").style.visibility=hidden;

但它不起作用，谢谢。

Answer 1

首先，使用以下工具提示选项......

tooltip: {
  isHtml: true,         // <-- use html tooltips (vs. svg)
  trigger: 'selection'  // <-- lock tooltip in place when clicked
}

使用isHtml: true会使课程google-visualization-tooltip可用

但是，只有在选择了某个区域之后才能使用

这就是为什么我们必须在document级别设置事件监听器......

// click anywhere on tooltip to close
$(document).on('click', '.google-visualization-tooltip', function(e) {
  chart.setSelection(null);
});

请参阅以下工作代码段（单击工具提示上的任意位置以关闭）...

＆＃13;

google.charts.load('current', {
  callback: drawRegionsMap,
  packages:['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
      ['Country', 'Companies', 'Installations'],
      ['South Africa', 200, 3],
      ['Angola', 300, 4],
      ['Malawi', 400, 12],
      ['United States', 500, 19]
  ]);

  var options = {
    colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: '#f5f5f5',
    displayMode: 'regions',
    resolution: 'countries',
    tooltip: {
      isHtml: true,
      trigger: 'selection'
    }
  };

  var container = document.getElementById('geochart-colors');
  var chart = new google.visualization.GeoChart(container);
  chart.draw(data, options);

  // click anywhere on tooltip to close
  $(document).on('click', '.google-visualization-tooltip', function(e) {
    chart.setSelection(null);
  });
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

＆＃13;

在geochart上关闭工具提示按钮的工作版本代码？

1 个答案: