Chart.js - создание диаграммы частот временных рядов с данными JSON
поэтому недавно я работал над веб-приложением, которое собирает данные из запросов, и я пытаюсь вывести данные в виде графика на основе частоты в час / месяц и т. д.
Итак, я использую Chart.js и имею данные дат в формате JSON, и я пытаюсь создать диаграмму, которая показывает частоту запросов в час и т. д.
Мои данные - это просто каждый запрос с отметкой времени, поэтому все, что у меня есть, - это набор отметок времени в формате 2018-01-03 15:15:04. Например:
{'2018-01-03 15:15:04', '2018-01-04 06:32:45', '2018-01-04 23:32:45', '2018-02-23 01:24:32'}
за исключением того, что у меня их сотни. Я хочу только частоту в час, месяц и т. д.
Может кто-то указать мне верное направление? Мои две мысли были такими:
- Просто сделай сам подсчет и парсинг и получи количество в час, а затем просто брось данные на диаграмму.
- Каким-то образом использовать их встроенную функциональность на время, о чем я все еще немного не понимаю даже после прочтения документации.
спасибо всем!
Вот пример того, что мне хотелось бы: Пример диаграммы
Также http://www.chartjs.org/samples/latest/scales/time/financial.html
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Лучше всего выбрать номер 1 в своем списке. Я написал пример того, как этого легко добиться.
Сначала найдите частоту (я делал это по месяцам / годам) и добавьте ее в карта. Я использовал карту, потому что функции .keys() и .values() для карты возвращаются в порядке вставки. Обычный объект не может гарантировать порядок.
Затем Chart.js может довольно легко отображать эти значения, используя синтаксис распространения, чтобы превратить итераторы .keys() и .values() в массивы.
var a = ['2018-01-03 15:15:04', '2018-01-04 06:32:45', '2018-01-04 23:32:45', '2018-02-23 01:24:32', '2018-02-23 04:33:12', '2018-03-23 05:33:12', '2018-03-22 08:33:12', '2018-04-27 01:33:12'];
var freqMap = new Map();
a.forEach(function(time) {
var date = new Date(time);
var monthName = date.toLocaleString("en-us", {
month: "short"
});
var key = monthName + "-" + date.getFullYear();
var count = freqMap.get(key) || 0;
freqMap.set(key, ++count);
});
var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [...freqMap.keys()],
datasets: [{
label: 'Requests per month',
data: [...freqMap.values()]
}],
},
options: {
elements: {
line: {
tension: 0
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id = "myChart" width = "400" height = "400"></canvas>нет проблем! Если он решил ваш вопрос, не стесняйтесь принимать его как ответ.
Только что сделал. Спасибо огромное, Андрей :)
Вау, похоже, это поможет. Большое спасибо за ответ, потрясающе!