谷歌图表鼠标悬停两个图表

Question

这个问题涉及使用谷歌图表。

我有一个数据集组成的贡献额类别，分为一个月的日子。我用饼图表示整个月份，并用叠加的条形图表示单个日期的数据。两个图表基本上都基于相同的信息。如果我按照正确的顺序给这两个图表提供信息，则颜色在两者之间进行协调（即一个类别与另一个类别具有相同的颜色）。

当您将鼠标悬停在饼图片上时，它会突出显示。我希望堆叠条形图中的相应数据同时突出显示，反之亦然。

什么是最好的方式来完成这与谷歌可视化API？

Answer 1

使用<chart type>#setSelection方法突出显示数据点。如果我正确理解你的数据结构，应该这样工作：

google.visualization.events.addListener(pieChart, 'select', function() { 
    var selection = pieChart.getSelection(); 
    if (selection.length) { 
     // assumes the row in the PieChart's data corresponds to the data series in the ColumnChart, which is the nth + 1 column 
     columnChart.setSelection([{column: selection[0].row + 1}]); 
    } 
}); 
google.visualization.events.addListener(columnChart, 'select', function() { 
    var selection = columnChart.getSelection(); 
    if (selection.length) { 
     // assumes the data series in the ColumnChart's data corresponds to the row in the PieChart, which is the nth column - 1 
     pieChart.setSelection([{column: selection[0].column - 1}]); 
    } 
});