同一张桌子上的两个事件

Question

我有一张桌子，还有一个条形图，显示了与桌子中相同的内容。 当我在表格中选择特定行时，我会为该特定行显示另一个更详细的图形，并且条形图会消失（隐藏）。 我想要的是，也可以做到另一种方式：在条形图中选择一个条应该突出显示表中的相关行，但不要“单击它”，因为这会触发表上的“ Selecthandler” 。

下面是我的代码片段（表格）：

 var data = new google.visualization.arrayToDataTable(dataRaw, false);
            var table = new google.visualization.Table(document.getElementById('errorTable'));
 var options = {

                cssClassNames: cssClassNames,
                allowHtml: true,
                title: "Error",

            };

            google.visualization.events.addListener(table, 'select', selectHandler);
            table.draw(data, options);
function selectHandler() {....ect.

Answer 1

使用图表方法-> setSelection(selection_array)

从文档中 ...

（可选）在可视化中选择一个数据条目，例如，面积图中的一个点或条形图中的一个条形。 调用此方法时，可视化将直观地指示新选择是什么。 setSelection（）的实现不会触发“ select”事件。 可视化可能会忽略部分选择。 例如，一个表格图表只能显示选定的行。

表格只能选择整行，而不能选择列或单元格，
所以我们必须从条形图选择中删除列参考

当我们在条形图上使用getSelection时，
它将返回一个选择对象数组，
每个将为row和column的键
例如-> [{row: 0, column: 1}]

在表格上使用setSelection时，我们必须将column值设置为null
例如-> [{row: 0, column: null}]

请参阅以下工作片段，
当选择条形图时，我们使用getSelection
然后在选择数组上使用map方法将column值设置为null
然后将新的选择数组传递给表上的setSelection

选择条形图时，您会看到
表格中的同一行将被选中...

 google.charts.load('current', { packages: ['corechart', 'table'] }).then(function () { var dataRaw = [ ['Category', 'Value'], ['A', 1], ['B', 2], ['C', 3], ['D', 4], ['E', 5], ['F', 6] ]; var dataTable = google.visualization.arrayToDataTable(dataRaw, false); var chartBar = new google.visualization.BarChart(document.getElementById('successChart')); var chartTable = new google.visualization.Table(document.getElementById('errorTable')); google.visualization.events.addListener(chartBar, 'select', selectHandler); chartBar.draw(dataTable, { selectionMode: 'multiple' }); chartTable.draw(dataTable); function selectHandler() { var selectionBar = chartBar.getSelection(); var selectionTable = selectionBar.map(function (selectedItem) { return { row: selectedItem.row, column: null }; }); chartTable.setSelection(selectionTable); } }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="successChart"></div> <div id="errorTable"></div>