charts - 谷歌图表，聚合/分组过滤后的数据表

Question

我有一个 DataTable、一个 DateRangeFilter 和一个聚合对象。我希望我可以使用 DateRangeFilter 来过滤 DataTable 中的数据并将聚合限制为 FILTERED DataTable。但这并没有发生。我是不是做错了什么(可能忘记刷新/绘制)，或者类似的事情是不可能的。

我的代码在这里: https://jsfiddle.net/v0w5ehsc/

    var dashboard = new google.visualization.Dashboard(document.getElementById('daterange_div'));
dashboard.bind(slider, tableChart);
dashboard.draw(dataAll);

var grouped_data = google.visualization.data.group(
    dataAll,
    [0, 2],
    [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
    ]
);

Answer 1

您只能将一个数据表绑定(bind)到一个仪表板/过滤器。

为了聚合过滤后的数据表...

1. 等待 ChartWrapper 上的 'ready' 事件
2. 从 ChartWrapper 聚合过滤后的数据表

请参阅以下基于上一个问题的示例...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['corechart', 'table', 'controls']
});

function drawVisualization() {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'dat_ym', label: 'Start Date', type: 'date'},
      {id: 'user-id', label: 'User-Id', type: 'string'},
      {id: 'customer-id', label: 'Customer-Id', type: 'string'},
      {id: 's_minutes', label: 'minutes', type: 'number'}
    ],
    rows: [
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '67205'}, {v: 1122} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '67205'}, {v: 332} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '228626'}, {v: 334} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '67205'}, {v: 554} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '67205'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '228626'}, {v: 544} ]},
    ]
  });

  var options = {
    hAxis: {title: '', textStyle: { fontSize: '13' }, textPosition: 'in'},
    vAxis: {title: '', textStyle: { fontSize: '10' }},
    seriesType: 'bars',
    legend: {position: 'top', textStyle: {color: 'black', fontSize: 14}},
    isStacked: true
  };

  // build dashboard
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table-div',
    options: {
      allowHtml: true
    }
  });
  var dateSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'slider-div',
    options: {
      filterColumnIndex: 0
    }
  });

  // Table 'ready' event
  google.visualization.events.addListener(table, 'ready', function () {
    // group data by date, customer
    var grouped_data = google.visualization.data.group(
      // get data table from ChartWrapper
      table.getDataTable(),
      [0, 2],
      [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
      ]
    );

    // sort grouped data
    grouped_data.sort([{column: 0},{column: 1}]);

    // get unique customers
    var custGroup = google.visualization.data.group(
      data,
      [2]
    );

    // build customer data table
    var custData = new google.visualization.DataTable({
      cols: [
        {id: 'dat_ym', label: 'Start Date', type: 'date'},
      ]
    });

    // add column for each customer
    for (var i = 0; i < custGroup.getNumberOfRows(); i++) {
      custData.addColumn(
        {label: custGroup.getValue(i, 0), type: 'number'}
      );
    }

    // add row for each date / customer
    var rowDate;
    var rowIndex;
    for (var i = 0; i < grouped_data.getNumberOfRows(); i++) {
      if (rowDate !== grouped_data.getValue(i, 0).getTime()) {
        rowDate = grouped_data.getValue(i, 0).getTime();
        rowIndex = custData.addRow();
        custData.setValue(rowIndex, 0, new Date(rowDate));
      }
      for (var x = 1; x < custData.getNumberOfColumns(); x++) {
        if (custData.getColumnLabel(x) === grouped_data.getValue(i, 1)) {
          custData.setValue(rowIndex, x, grouped_data.getValue(i, 2));
        }
      }
    }

    // draw agg table
    new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'agg-div',
      dataTable: custData,
      options: {
        allowHtml: true
      }
    }).draw();
  });

  // draw dashboard
  dashboard.bind(dateSlider, table);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard-div">
  <div id="slider-div"></div>
  <div id="table-div"></div>
  <br/>
  <div id="agg-div"></div>
</div>