在不同的值上透视 Google DataTable答案

【问题标题】：Pivot Google DataTable on distinct values在不同的值上透视 Google DataTable
【发布时间】：2018-02-14 02:46:35
【问题描述】：

我有一个以下格式的 Google 数据表：

+----------+-------+--------+
|   time   | label | values |
+----------+-------+--------+
| 12345678 | foo   | 100    |
| 12345678 | bar   | 200    |
| 12345700 | foo   | 150    |
| 12345700 | bar   | 350    |
    ...       ...      ...

我需要创建一个折线图，每个不同的“标签”各有一条线，X 轴为时间，Y 轴为值。

据我所知，这要求 DataTable 采用以下格式：

+----------+-----+-----+
|   time   | foo | bar |
+----------+-----+-----+
| 12345678 | 100 | 200 |
| 12345700 | 150 | 350 |
    ...      ...   ...

我要么需要一种方法将 DataTable 旋转成这种形状，要么需要一种方法来绘制我想要的 LineChart 而无需修改原始 DataTable。

附录

我可以很容易地创建这个形状的 DataTable，如下所示：

var newDataTable = new google.visualization.DataTable();
newDataTable.addColumn("number", "time");
var distinctLabels = oldDataTable.getDistinctValues(1);
for (var i = 0; i < distinctLabels.length; i++)
{
    newDataTable.addColumn("number", distinctLabels[i]);
}

但接下来的挑战是填充此表。由于新表中单行的数据存在于第一个表的多行中，因此我不能简单地将调用.addRow() 的旧表的每一行迭代到新表

我可以利用哈希表或其他一些复杂的结构来解析数据并使用它，但是：

这似乎是一个有更简单解决方案的问题
我想要尽可能好的性能，因为每次有人与页面上的 UI 元素交互时都需要重新绘制此 LineChart

【问题讨论】：

标签： javascript datatable google-visualization google-datatable

【解决方案1】：

首先，您可以创建一个DataView，其中包含每个不同标签的列

然后使用group()方法按时间戳聚合标签列

请参阅以下工作 sn-p...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['time', 'label', 'value'],
    ['12345678', 'foo', 100],
    ['12345678', 'bar', 200],
    ['12345700', 'foo', 150],
    ['12345700', 'bar', 350],
  ]);

  var aggColumns = [];
  var viewColumns = [0];

  var distinctLabels = data.getDistinctValues(1);
  distinctLabels.forEach(function (label, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === label) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      type: 'number',
      label: label
    });
    aggColumns.push({
      column: index + 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var groupData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(groupData);
  var table = new google.visualization.Table(document.getElementById('table'));
  table.draw(groupData);
}

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

【讨论】：