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

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 数据绘制表格 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为每个图表构建 View
您将必须手动考虑过滤器的 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);
  }
}]);

请参阅以下工作片段...

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>