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)

来自docs ...

（可选）在可视化文件中选择一个数据条目，例如，面积图中的一个点或条形图中的一个条形。调用此方法时，可视化将直观地指示新选择是什么。 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>

同一张桌子上的两个事件

1 个答案: