javascript — несколько точек данных на дату в Google Charts
Я использую стандартный массив php, который извлекает данные из базы данных в обратном порядке для создания Google Chart. Что-то вроде этого…
$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));
}
Работает отлично.
Этот процесс создает новую точку данных на диаграмме для каждой строки массива. У меня проблема, когда есть несколько событий ($ транзакция) на дату. Каждое событие отображается в виде новой точки графика, тогда как я хотел бы построить график последней точки данных для каждой даты. (постоянный временной ряд)
Каков наилучший способ сделать это?
Существует ли простая настройка диаграммы Google для использования последней точки данных за дату? Я искал, но ничего не нашел по этому вопросу.
Спасибо
Решение
мы можем использовать group() метод,
с пользовательской функцией агрегирования,
отображать только последнюю точку для данной даты.
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];
}
}]
);
свойство агрегации выше,
должна быть функция, которая принимает один аргумент,
это массив значений для каждой группы.
в этом случае мы просто возвращаем последнее значение в массиве.
групповой метод возвращает таблицу данных,
который мы можем использовать, чтобы нарисовать график.
см. следующий рабочий фрагмент …
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>Другие решения
Других решений пока нет …
detector