如何使用谷歌图表绘制给定数据表的折线图？

Question

如果我在谷歌图表中有以下数据表定义

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('string','Team');
data.addColumn('number', 'Total Score');

该表中的数据如下所示：

Dec,Team A,68
Dec,Team B,75
Dec,Team C,23
Dec,Team D,158
Dec,Team E,27
Jan,Team A,68
Jan,Team E,27

如何使用谷歌图表制作如下折线图：

我尝试过使用

var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.draw(data);

但这会产生一条沿 h 轴重复月份的单行

提前谢谢你

Answer 1

每个团队需要有自己的系列，或数据表中的列，
如下...

Month, Team A, Team B, Team C, Team D, Team E
Dec, 68, 75, 23, 158, 27

我们可以使用组函数和数据视图来转换原始数据表。

首先，按团队对数据进行分组。

// group data table
var groupData = google.visualization.data.group(
  data,
  [0, 1],
  [{
    column: 2,
    aggregation: google.visualization.data.sum,
    type: 'number'
  }]
);

然后我们可以使用数据视图来创建单独的列/系列

// create data view
var view = new google.visualization.DataView(groupData);

// sum column array
var aggColumns = [];

// use month as first view column
var viewColumns = [0];

// build view & agg columns for each team
groupData.getDistinctValues(1).forEach(function (team, index) {
  // add view column for each team
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 1) === team) {
        return dt.getValue(row, 2);
      }
      return null;
    },
    label: team,
    type: 'number'
  });

  // add sum column for each team
  aggColumns.push({
    aggregation: google.visualization.data.sum,
    column: index + 1,
    label: team,
    type: 'number'
  });
});

// set view columns
view.setColumns(viewColumns);

然后我们可以再次聚合，折叠所有行...

// sum view by date
var aggData = google.visualization.data.group(
  view,
  [0],
  aggColumns
);

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

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('string','Team');
  data.addColumn('number', 'Total Score');
  data.addRows([
    ['Dec', 'Team A', 68],
    ['Dec', 'Team B', 75],
    ['Dec', 'Team C', 23],
    ['Dec', 'Team D', 158],
    ['Dec', 'Team E', 27],
    ['Jan', 'Team A', 68],
    ['Jan', 'Team E', 27]
  ]);

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

  // create data view
  var view = new google.visualization.DataView(groupData);

  // sum column array
  var aggColumns = [];

  // use month as first view column
  var viewColumns = [0];

  // build view & agg columns for each team
  groupData.getDistinctValues(1).forEach(function (team, index) {
    // add view column for each team
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === team) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: team,
      type: 'number'
    });

    // add sum column for each team
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: team,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var lineChart = new google.charts.Line(document.getElementById('LineChart'));
  lineChart.draw(aggData);
});

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