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 data绘制表格，

两者都使用相同的branchFilter

图片示例：

我的仪表板现在的样子

现在的表

我需要的桌子

标签： javascriptchartsfiltergoogle-visualizationgraphing

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);
  }
}]);

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

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>