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

Question

这个问题与使用 Google 图表有关。

我有一个数据集，由具有贡献金额的类别组成，分为一个月的几天。我在饼图中表示整个月，我在堆积条形图中表示个别日子的数据。这两个图表基本上都基于相同的信息。如果我以正确的顺序为两个图表提供它们的信息，则颜色在两者之间是协调的（即，一个类别中的每个类别与另一个类别中的同一类别具有相同的颜色）。

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

使用 Google 可视化 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}]);
    }
});