点击离开时关闭 Google 饼图工具提示

Question

我正在使用 Google Pie Chart 进行数据表示。图表的工具提示包括用户可以单击的操作项。为了让工具提示打开足够长的时间以便用户单击这些项目，我选择让工具提示显示在 click/selection 而不是悬停时：

tooltip: { trigger: 'selection' }

现在的问题是，关闭这些工具提示的唯一方法是在图表上进行另一个选择（从而显示另一个工具提示）或单击之前选择的相同 legend/pie 切片值。

这很笨重；为了良好的用户体验，我想让用户只需单击饼图周围的空白 space 即可关闭工具提示。

到目前为止，我找到的最接近的解决方案是 this question，但第一个答案不起作用，第二个答案不允许通过单击关闭工具提示。问题似乎是图表周围的所有白色 space 仍被视为图表本身的一部分，而不是单独的元素。我试图通过检查被点击元素的类型来解决这个限制，看它是否是白色的space，如下所示：

function clearChartSelection(e) {

        if (!chartDOMElement.contains(e.srcElement) || e.srcElement.tagName.toUpperCase() == 'RECT') {
            chart.setSelection();
        }
    }

不幸的是，这也不起作用，因为图例元素有时会呈现为矩形类型而不是文本（我仍在尝试找出导致这种情况的原因）。 在饼图中，图例点击也设置了选择，我想保留这个功能。

现在我正在研究以下两条路径，但没有运气：

一些其他区分slices/legend和空白图表区域的方法，或者
如果选择事件也被触发，则以某种方式阻止点击事件。

我绝对愿意接受可以解决此问题的任何其他想法。一般来说，我想要的功能对于工具提示来说很常见，所以希望我只是错过了一些明显的东西。

Answer 1

除了正文点击，
使用图表的点击事件

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['A', 1],
    ['B', 2],
    ['C', 2],
    ['D', 2],
    ['E', 7]
  ]);

  var options = {
    tooltip: {
      trigger: 'selection'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  google.visualization.events.addListener(chart, 'click', clearSelection);
  document.body.addEventListener('click', clearSelection, false);

  chart.draw(data, options);

  function clearSelection(e) {
    if (!container.contains(e.srcElement)) {
      chart.setSelection();
    }
  }
});

html, body {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

点击离开时关闭 Google 饼图工具提示

Dismiss Google Pie Chart Tooltip on Click Away

javascript

jquery

charts

google-visualization

google-pie-chart