Google图表将鼠标悬停在两个图表上

Question

这个问题与使用Google Charts有关。

我有一个包含贡献金额类别的数据集，存储在一个月的几天中。 我用饼图表示整个月，并用堆积的条形图表示各天的数据。 两种图表基本上都基于相同的信息。 如果我以正确的顺序给两个图表提供信息，则两者之间的颜色是一致的（即，一个类别中的每个类别与另一个类别中的相同类别具有相同的颜色）。

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

使用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}]);
    }
});