javascript - Google 图表中每个日期的多个数据点

Question

我正在使用一个标准的 php 数组，它以相反的顺序从数据库中提取数据以创建一个 Google 图表。像这样的……

$graph_data = array(array('Date', 'Amount'));
foreach (array_reverse($transactions) as $transaction) 
{ 
    array_push($graph_data, array(date("d M", strtotime(substr($transaction->createdOn, 0, 10))), $transaction->balanceAfter + 0));
    }

工作正常。

此过程会在图表上为数组的每一行创建一个新数据点。我遇到的问题是一个日期有多个事件($transaction)。每个事件都绘制为一个新的图表点，而我想绘制每个日期的最后一个数据点。 (恒定时间序列)

解决这个问题的最佳方法是什么？

是否有一个简单的谷歌图表设置来使用每个日期的最后一个数据点？我已经搜索过，但没有找到任何相关信息。

谢谢

Answer 1

我们可以使用 group() method ,
使用自定义聚合函数，
只显示给定日期的最后一点。

var dataLast = google.visualization.data.group(
  data,  // data table
  [0],   // group by column
  [{     // aggregated column
    column: 1,
    type: 'number',
    label: data.getColumnLabel(1),
    // aggregation function
    aggregation: function (values) {
      // return the last value for the group
      return values[values.length - 1];
    }
  }]
);

上面的聚合属性，
应该是一个接受单个参数的函数，
这是每个组的值数组。

在这种情况下，我们只返回数组中的最后一个值。

group方法返回一个数据表，
我们可以用它来绘制图表。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Amount'],
    ['09 Jan', 13],
    ['29 Jan', 11],
    ['29 Jan', 9],
    ['29 Jan', 4],
    ['29 Jan', -3],
    ['29 Jan', 0],
    ['29 Jan', -3],
    ['30 Jan', -5],
    ['30 Jan', 0],
    ['30 Jan', -1],
    ['30 Jan', -2],
    ['30 Jan', -3],
    ['30 Jan', -4],
    ['30 Jan', -5]
  ]);

  var dataLast = google.visualization.data.group(
    data,  // data table
    [0],   // group by column
    [{     // aggregated column
      column: 1,
      type: 'number',
      label: data.getColumnLabel(1),
      // aggregation function
      aggregation: function (values) {
        // return the last value for the group
        return values[values.length - 1];
      }
    }]
  );

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataLast);  // use grouped data to draw the chart
});

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