Как взять набор объектов Date и отобразить частоту в зависимости от времени суток с помощью ChartJS

У меня есть набор объектов 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>

Я хотел бы сделать простой линейный график, показывающий частоту дат, соответствующих любому времени суток.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны использовать данные следующим образом:

  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;
        }
      }
    }
  }]
}
 };

Другие вопросы по теме