如何使用不同的方式过滤两个图表以使用相同的字符串过滤器获取数据？

Question

这是我的代码：

    google.charts.load('current', {'packages':['corechart', 'controls']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'ID');
      data.addColumn('string', 'Customer_Name');
      data.addColumn('number', 'Credits');
      data.addColumn('string', 'Date');
      data.addColumn('string', 'Seller');
      data.addColumn('string', 'Branch');

      data.addRows([
        [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
        [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
        [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
        [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
        [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
      ]);

        var groupedBranch = google.visualization.data.group(data, [5], [{
          column: 0,
          type: 'number',
          label: data.getColumnLabel(0),
          aggregation: google.visualization.data.count
        }]);

        var branchFilter = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'div_filter1',
            'options': {
                'filterColumnLabel': 'Branch',
                'matchType': ('any'),
                'ui': {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
            }

        });

        var branchChart = new google.visualization.ChartWrapper({
            'chartType': 'ColumnChart',
            'containerId': 'div_chart1',
            'options': {
            'animation':{duration:666, easing:'inAndOut', startup:true},
            'backgroundColor': {fill:'transparent' },
            'title': 'Branches',
            'hAxis': {title: 'Branch', titleTextStyle: {color: '#999'},   textStyle : {fontSize: 12}},
            'vAxis': {minValue: 0},
            'colors': ['#f39c12'],
            'legend': 'none'
            }

        });

        var tableChart = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'div_chart3',
            'options': {
            'animation':{duration:666, easing:'inAndOut', startup:true},
            'backgroundColor': {fill:'transparent' },
            'title': 'a',
            'hAxis': {title: 'Loja', titleTextStyle: {color: '#999'}, slantedText:true, slantedTextAngle:74, textStyle : {fontSize: 12}},
            'vAxis': {minValue: 0},
            'colors': ['#f39c12'],
            'legend': 'none'
            }

        });

然后是我的仪表板的绘制方式（我的问题）。

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dashboard.bind(branchFilter, [branchChart, tableChart]);
  dashboard.draw(groupedBranch);
    }

这是我的观点。

我想根据我的 var groupedBranch 数据绘制 柱形图，并根据我的 var 数据绘制 Table em>，

两者都使用相同的branchFilter

图片示例：

The way my dashboard is now

The table now

The table I need

Answer 1

仪表板仅适用于一个数据表

在这种情况下，在过滤器的'statechange' 事件上独立绘制每个图表

google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);

当事件触发时，使用数据表方法getFilteredRows为每个图表建立一个视图
您将不得不手动考虑过滤器的matchType

var filterValue = branchFilter.getState().value;
viewBranch.rows = groupedBranch.getFilteredRows([{
  column: 0,
  test: function (value) {
    // same as matchType: 'any'
    return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
  }
}]);

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedBranch = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var branchFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_filter1',
    dataTable: groupedBranch,
    options: {
      filterColumnLabel: 'Branch',
      matchType: 'any',
      ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
    }
  });
  google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
  google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);

  var branchChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'div_chart1',
    dataTable: groupedBranch,
    options: {
      animation: {duration: 666, easing: 'inAndOut', startup: true},
      backgroundColor: {fill:'transparent' },
      title: 'Branches',
      hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
      vAxis: {minValue: 0},
      colors: ['#f39c12'],
      legend: 'none'
    }
  });

  var tableChart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_chart3',
    dataTable: data
  });

  branchFilter.draw();

  function drawCharts() {
    var filterValue = branchFilter.getState().value;
    var viewBranch = {};
    var viewTable = {};

    if (filterValue !== '') {
      viewBranch.rows = groupedBranch.getFilteredRows([{
        column: 0,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
      viewTable.rows = data.getFilteredRows([{
        column: 5,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
    }
    branchChart.setView(viewBranch);
    branchChart.draw();
    tableChart.setView(viewTable);
    tableChart.draw();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>