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）。每个事件都被绘制为一个新的图表点，而我想绘制每个日期的最后一个数据点。（恒定时间序列）

最好的方法是什么？

是否有一个简单的Google图表设置即可使用每个日期的最后一个数据点？我已经搜索过，但对此一无所获。

谢谢

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>

Google图表中每个日期有多个数据点

1 个答案: