如何同步和显示不同谷歌图表的工具提示？答案

【问题标题】：How to sync and display the tooltips of different google charts?如何同步和显示不同谷歌图表的工具提示？
【发布时间】：2017-10-13 07:59:06
【问题描述】：

我正在两个 iframe 上创建不同的谷歌图表以进行比较。为此，我需要在两个图表上同步鼠标点击，并在点击的特定位置显示工具提示。

虽然我已经通过chart_2.setSelection(chart_1.getSelection());方法实现了鼠标点击的同步。

但工具提示不会显示在第二张图表的特定位置：

在第二个图表上显示工具提示的唯一方法是单击图表，然后激活工具提示：

激活后，工具提示会与第一个图表同步，并且每次点击都能完美运行：

我想要实现的是在第二个图表上显示工具提示而不手动激活它，而是在每次点击第一个图表时显示它。

【问题讨论】：

标签： javascript html iframe charts google-visualization

【解决方案1】：

设置以下选项以使工具提示显示在 --> setSelection

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

请参阅以下工作 sn-p，
当'ready' 事件触发时，会进行选择，
演示工具提示是否显示

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2', 'y3'],
    [1, 10, 15, 20, 25],
    [2, 12, 18, 24, 30],
    [3, 14, 21, 28, 35],
    [4, 16, 24, 32, 40]
  ]);

  var options = {
    pointSize: 4,
    tooltip: {
      trigger: 'both'
    },
    width: 360
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 2, column: 1}]);
  });
  chart.draw(data, options);
});

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

【讨论】：

我的工具提示触发器处于“选择”状态，我正在使用选择侦听器来同步两个 iframe 上的鼠标单击事件：google.visualization.events.addListener(chart,'select',function() { parent.window.iframe_charts.forEach(function(element) { element.setSelection(chart.getSelection()); }); 其中iframe_charts 是一个包含所有图表对象的值。我想在任何图表上一键显示两个图表的工具提示。
当你使用setSelection时，工具提示不会出现吗？（如上面的sn-p）
确实如此，但它只选择一列（即图例编号 #1），如果我使用 chart.setSelection([{row: 2, column: 2}]); 然后它选择第二列或图例编号 #2，而我希望它选择所有列。