谷歌折线图:添加其他图表读数总和的图表

Question

我有包含 4 列的图形数据(带有日期时间类型的 X 轴值和带有类型编号的 3 个 Y 轴值(。我正在构建一个有 3 条线的图表(没有什么不寻常的(：

var chartDataTable = new google.visualization.DataTable();
// get data to chartDataTableRows variable by ajax
chartDataTable.addRows(chartDataTableRows);
var _chartContainer = $('<div id="_chart"</div>').appendTo($('#_tempChart'));
var chart = new google.visualization.LineChart(_chartContainer[0]);
chart.draw(chartDataTable, defaultChartOptions());

现在我需要在图表中添加另一条线，该线将显示现有三条线的指标之和。谷歌图表中有这样的工具吗？

Answer 1

您可以使用带有计算列的DataView作为总计

1( 在DataTable上创建一个DataView

var chartDataView = new google.visualization.DataView(chartDataTable);

2( 使用 setColumns 方法提供DataView
的列为现有列提供列索引，
以及总计的计算列...

chartDataView.setColumns([0, 1, 2, 3, {
  type: 'number',
  label: 'total',
  calc: function (dt, row) {
    var rowTotal = 0;
    for (var col = 1; col < chartDataTable.getNumberOfColumns(); col++) {
      rowTotal += chartDataTable.getValue(row, col);
    }
    return rowTotal;
  }
}]);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chartDataTable = new google.visualization.DataTable();
  chartDataTable.addColumn('date', 'x');
  chartDataTable.addColumn('number', 'y0');
  chartDataTable.addColumn('number', 'y1');
  chartDataTable.addColumn('number', 'y2');
  chartDataTable.addRows([
    [new Date(2018, 2, 28), 5, 2, 8],
    [new Date(2018, 2, 29), 7, 3, 6],
    [new Date(2018, 2, 30), 3, 0, 9],
    [new Date(2018, 2, 31), 1, 5, 9],
    [new Date(2018, 3, 1), 3, 6, 7],
    [new Date(2018, 3, 2), 4, 7, 8],
    [new Date(2018, 3, 3), 3, 1, 8],
    [new Date(2018, 3, 4), 4, 2, 6],
    [new Date(2018, 3, 5), 2, 3, 5]
  ]);
  var chartDataView = new google.visualization.DataView(chartDataTable);
  chartDataView.setColumns([0, 1, 2, 3, {
    type: 'number',
    label: 'total',
    calc: function (dt, row) {
      var rowTotal = 0;
      for (var col = 1; col < chartDataTable.getNumberOfColumns(); col++) {
        rowTotal += chartDataTable.getValue(row, col);
      }
      return rowTotal;
    }
  }]);
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(chartDataView);
});

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