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

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 数据和 Table 绘制 柱形图 基于我的 var 数据,

两者使用相同的 branchFilter

图片示例：

The way my dashboard is now

The table now

The table I need

Answer 1

仪表板仅适用于一种数据 table

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

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

事件触发时，使用数据table方法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);
  }
}]);

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

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>

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

How can I filter two charts with different ways to get data with the same string filter?

javascript

charts

graphing

filter

google-visualization