时间戳

首页 > 解决方案 > 同一张桌子上的两个事件

c# - 同一张桌子上的两个事件

问题描述

我有一个表格和一个条形图，显示与表格中相同的内容。当我在表中选择特定行时，我会显示该特定行的另一个更详细的图表，并且条形图会消失（隐藏）。我想要的是能够反过来：在条形图中选择一个条形应该突出显示表中的连贯行，但没有“单击它”，因为那时我会触发表上的“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.

标签： c#chartsevent-handlinggoogle-visualization

解决方案

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

从文档...

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

表格图表只能选择整行，而不是列或单元格，
因此我们必须从条形图选择中删除列引用

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

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

see following working snippet,
when the bar chart is selected, we use getSelection
then use the mapmethod on the selection array to set the columnvalues to null
then pass the new selection array to setSelectionon the table

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

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>

推荐阅读