Question

我想通过单击按钮来过滤Google可视化“表格图表”（这无法通过控件Google provides正确地实现）。例如：使用日期时间选择器对时间范围进行过滤（我知道有一个DateRangeFilter，但这并不方便）。我找到了一种方法，但似乎多余/不太干净。

我的DataTable仅包含字符串，因此首先我必须创建一个包含适用于我的过滤器的数据类型的DataView（我正在使用全局变量进行查看，测试等-如果您有更好的主意，请告诉我！）：

  // Create my data table.
  var dataTable = google.visualization.arrayToDataTable(csv, false);

  var columns = [{
    type: 'datetime',
    label: dataTable.getColumnLabel(0),
    calc: function (dt, row) {
        var val = dt.getValue(row, 0).split(' ');
        var date = val[0].split('-');
        var time = val[1].split(':');
        //could have used moment.js but I know the exact format and it will never change
        return new Date(date[2],(date[1] - 1),date[0],time[0],time[1])
    }},
    1,
    {
    type: 'number',
    label: dataTable.getColumnLabel(4),
    calc: function (dt, row) {
        var val = dt.getValue(row, 4);
        return (val != '' && val != null) ?new Number(val).valueOf() : null;
    }
  }];

  //this create my DataView, everything's alrigth  
  view = new google.visualization.DataView(dataTable);
  view.setColumns(columns);

然后，我进行一些分组并绘制我的表格图表：

   test = google.visualization.data.group(view, [{
        column: 1,
        label: 'hashtags',
        type: 'string'
    }], [{
        column: 2,
        label: 'score',
        aggregation: google.visualization.data.sum,
        type: 'number'
    }]
    );

  table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(test, {showRowNumber: true, width: '100%', height: '100%', page: 'enable', pageSize: 10});

最后，这是用户单击按钮时的操作：

  $("#test").click(function() {
    //Just a test case with one date
    view.setRows(view.getFilteredRows([{column: 0, maxValue: new Date(2019,2,16)}]));

   test = google.visualization.data.group(view, [{
        column: 1,
        label: 'hashtags',
        type: 'string'
    }], [{
        column: 2,
        label: 'score',
        aggregation: google.visualization.data.sum,
        type: 'number'
    }]
    );
    table.draw(test,{showRowNumber: true, width: '100%', height: '100%', page: 'enable', pageSize: 10});
  });

我真的需要重新分组并重新绘制吗？有更好的解决方案吗？

单击按钮即可过滤Google可视化“表格图表”（无ControlWrapper）

0 个答案: