Google 带有过滤器和 DataView 的可视化仪表板

Question

我有一个数据Table，看起来像这样：

+-------+---------+--------+
| month |  name   | income |
+-------+---------+--------+
| Jan   | Alice   | ,000 |
| Feb   | Alice   | ,000 |
| Mar   | Alice   | ,500 |
| Jan   | Bob     | ,750 |
| Feb   | Bob     | ,000 |
| Mar   | Bob     | ,000 |
| Jan   | Charlie | ,500 |
| Feb   | Charlie | ,100 |
| Mar   | Charlie | ,900 |
  ...       ...       ...

我希望用一个 ChartWrapper 和一个 ControlWrapper 显示一个 Google 可视化。

ChartWrapper 将显示 Table，但我只希望此 Table 显示 最近一个月 。为此，我在 ChartWrapper 上使用 .setView()。

ControlWrapper 将在名称列上包装一个 CategoryFilter。

我运行遇到的问题是，当我尝试 select 一个名字时，它会抛出一个错误：Invalid row index ... Should be in range [0-...]

我认为我遇到了这个问题，因为 setView 接受要显示的静态行数组，但如果 table 被过滤，那么要显示的行将不同。我这样打电话给 setView:

var recentRows = dataTable.getFilteredRows([
    {
        "column": 2,
        "minValue": dataTable.getColumnRange(2).max
    }
]);
chartWrapper.setView({
    "rows": recentRows
});

Answer 1

使用Dashboard控件时，
ChartWrapper 和 ControlWrapper 需要同步并使用相同的数据集

如您所见，仅在图表上设置 view 属性会导致此错误

更正，使用 DataView 绘制仪表板，
如以下工作片段所示...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['month', 'name', 'income'],
    [0, 'Alice', 5000],
    [1, 'Alice', 3000],
    [2, 'Alice', 4500],
    [0, 'Bob', 2750],
    [1, 'Bob', 8000],
    [2, 'Bob', 1000],
    [0, 'Charlie', 3500],
    [1, 'Charlie', 4100],
    [2, 'Charlie', 3900]
  ]);

  var control = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control',
    options: {
      filterColumnLabel: 'name',
      ui: {
        allowTyping: false,
        allowMultiple: true
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart'
  });

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 0,
    minValue: data.getColumnRange(0).max
  }]));

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard')
  );
  dashboard.bind(control, chart);
  dashboard.draw(view);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>
<div id="chart"></div>

另一个选项是不使用仪表板
独立绘制每个包装纸，
然后在控件上监听 statechange 事件，
并相应地绘制 table

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

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['month', 'name', 'income'],
    [0, 'Alice', 5000],
    [1, 'Alice', 3000],
    [2, 'Alice', 4500],
    [0, 'Bob', 2750],
    [1, 'Bob', 8000],
    [2, 'Bob', 1000],
    [0, 'Charlie', 3500],
    [1, 'Charlie', 4100],
    [2, 'Charlie', 3900]
  ]);

  var control = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control',
    dataTable: data,
    options: {
      filterColumnLabel: 'name',
      ui: {
        allowTyping: false,
        allowMultiple: true
      }
    }
  });
  control.draw();

  var chart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart',
    dataTable: data
  });

  google.visualization.events.addListener(control, 'ready', drawTable);
  google.visualization.events.addListener(control, 'statechange', drawTable);
  drawTable();

  function drawTable() {
    var filters = [{
      column: 0,
      minValue: data.getColumnRange(0).max
    }];

    var selectedNames = control.getState().selectedValues;
    if (selectedNames.length > 0) {
      filters.push({
        column: 1,
        test: function (value, row, column, table) {
          return (selectedNames.indexOf(table.getValue(row, column)) > -1);
        }
      });
    }

    chart.setView({
      rows: data.getFilteredRows(filters)
    });
    chart.draw();
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="control"></div>
<div id="chart"></div>

Google 带有过滤器和 DataView 的可视化仪表板

Google Visualization Dashboard with filter and DataView

javascript

charts

dashboard

google-visualization