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

时间:2017-10-13 07:59:06

标签: javascript html iframe charts google-visualization

我在两个iframe上创建不同的谷歌图表以进行比较。为了实现这一点,我需要在两个图表上同步鼠标单击并在点击的特定位置显示工具提示。

虽然我已使用chart_2.setSelection(chart_1.getSelection());方法同步鼠标点击。

但工具提示并未显示在该特定位置的第二张图表上:

enter image description here

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

enter image description here

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

enter image description here

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

1 个答案:

答案 0 :(得分:0)

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

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

请参阅以下工作片段,
'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>