如何使用 Google 图表中的事件来突出显示第二个图表中的元素？

Question

我正在使用 Google 图表显示相同数据的 2 个图表：第一个图表是堆积柱形图，第二个图表是饼图，其中包含第一个图表最后一列的数据。

我只在第二张图上显示图例，因为我不想两次显示相同的图例，但后来我失去了当鼠标悬停在图例上时突出显示列元素的功能。我正在寻找代码，以便当我将鼠标悬停在第二张图中的图例上时，不仅会突出显示饼图，还会突出显示柱形图中的相关元素。

我该如何实现？

我的代码：

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart1_div"></div>
<div id="chart2_div"></div>

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawGraph);

function drawGraph() {
      var data1 = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);
  var options1 = {
    width: 600,
    height: 400,
    legend: { position: 'none' },
    bar: { groupWidth: '75%' },
    isStacked: true,
  };

  var data2 = google.visualization.arrayToDataTable([
      ['Genre', 'Count'],
      ['Fantasy & Sci Fi', 28],
      ['Romance', 19],
      ['Mystery/Crime', 29],
      ['General', 30],
      ['Western', 12],
      ['Literature', 13]
    ]);

    var options2 = {
      title: 'Genres in 2030'
    };

  var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1_div'));

  var chart2 = new google.visualization.PieChart(document.getElementById('chart2_div'));

    chart1.draw(data1, options1);

    chart2.draw(data2, options2);
}

你可以在jsfiddle中看到我的例子：

https://jsfiddle.net/h402tw3q/

Answer 1

你可以很容易地做到这一点。设置 ColumnChart 以在选择时显示其工具提示：

tooltip : { trigger : 'selection' }

然后每次用户 select 或 hover 在 PieChart 或饼图 legend 上更新 ColumnChart 的选择：

google.visualization.events.addListener(chart2, 'onmouseover', function(selection) {
    chart2.setSelection(selection);
    chart1.setSelection([{ row: 2, column: selection.row+1 }]);
})

分叉 fiddle -> https://jsfiddle.net/eyft743w/

row 被硬编码为 2，因为 PieChart 与 ColumnChart.

中的该行相关联

如何使用 Google 图表中的事件来突出显示第二个图表中的元素？

How to use events in Google Charts to highlight elements in second graph?

charts

google-visualization