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

我使用谷歌图表显示两个相同数据的图形：第一个图形是一个堆叠的柱形图，第二个图形是一个饼图，其中包含第一个图形最后一列的数据

我只在第二个图形上显示图例，因为我不想两次显示同一个图例，但这样我就失去了鼠标悬停图例时高亮显示列元素的功能。我正在寻找代码，这样当我将鼠标悬停在第二个图形中的图例上时，不仅饼图会高亮显示，而且柱形图中的关联元素也会高亮显示

我如何实现这一点

我的代码：

  <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);
}

load（'visualization'，'1'，{packages:['corechart'，'bar']}）；
setOnLoadCallback（drawGraph）；
函数drawGraph（）{
var data1=google.visualization.arrayToDataTable([
[‘流派’、‘幻想与科幻’、‘浪漫’、‘神秘/犯罪’、‘一般’，
'西方'，'文学'，{角色：'注释'}]，
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
变量选项1={
宽度：600，
身高：400，
图例：{位置：'无'}，
条：{groupWidth:'75%}，
isStacked：是的，
};
var data2=google.visualization.arrayToDataTable([
[‘流派’、‘计数’]，
[《幻想与科幻》，28]，
[‘浪漫’，19]，
[《神秘/犯罪》，29]，
[“一般”，30]，
['Western'，12]，
[《文学》，第13页]
]);
var选项2={
标题：“2030年的流派”
};
var chart1=新的google.visualization.ColumnChart（document.getElementById（'chart1_div'））；
var chart2=新的google.visualization.PieChart（document.getElementById（'chart2_div'）；
图表1.绘图（数据1，选项1）；
图表2.绘图（数据2，选项2）；
}

您可以在JSFIDLE中看到我的示例：

---

你可以很容易地做到这一点。将

柱形图设置为在选择时显示其工具提示：

工具提示：{trigger:'selection'}

然后，每当用户
在
PieChart
或PieChart
图例上选择
或
悬停
时，更新对
柱形图的选择：

google.visualization.events.addListener（图表2，'onmouseover'，函数（选择）{
图2.选举（选择）；
图表1.setSelection（[{row:2，column:selection.row+1}]）；
})

叉形小提琴->

row
硬编码为
2
，因为
PieChart
与
columnhart
中的该行相关联，因此无法通过API实现highlightning，要实现这一点，您需要一个非常复杂的处理程序，它取决于图表类型和图表的功能。唯一可能的事情是选择一个单元格（就像你点击图表一样）好的，我们就快到了，但是由于图例应该代表两个图形，我希望所有列都高亮显示，而不仅仅是最后一列。好的。我让它完全按照我的需要工作，还使用了onmouseout。请看@pdube，好的，太好了，你成功了-只是抓住机会关注2030年：）谢谢你接受了答案。