У меня есть набор объектов Date, и я хотел бы отображать частоту дат, которые происходят в любой момент времени в течение дня. Диаграмма должна учитывать время суток из объектов даты, но не дату.
У меня есть JSFiddle с моим текущим кодом, хотя он не работает с текущим вводом данных.
$(function() {
var data = [];
var date = new Date();
var date2 = new Date(date.getTime());
date2.setDate(date2.getDate() + 1);
var date3 = new Date(date2.getTime());
date3.setDate(date3.getDate() + 1);
data.push({
t: date,
y: 3
});
data.push({
t: date2,
y: 5
});
data.push({
t: date2,
y: 11
});
var labels = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'
];
var options = {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true
},
type: "time",
time: {
unitStepSize: 1,
unit: "hour",
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm',
},
min: '00:00',
max: '24:00'
},
position: "bottom"
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {
if (Number.isInteger(value)) {
return value;
}
}
}
}]
}
};
var graph = document.getElementById('time-of-day-chart').getContext("2d");
var lineChart = new Chart(graph, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data
}]
},
options: options
});
})();
<canvas id = "time-of-day-chart" width = "400" height = "400"></canvas>
Я хотел бы сделать простой линейный график, показывающий частоту дат, соответствующих любому времени суток.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны использовать данные следующим образом:
var data = [0, 0, 0, 3, 0, 5, 11, 4, 6, 12, 33, 12, 0, 0, 40, 3, 0, 5, 11, 21, 6, 12, 10, 12 ];
var labels = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'
];
с этими вариантами работают хорошо:
var options = {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {
if (Number.isInteger(value)) {
return value;
}
}
}
}]
}
};