javascript - 如何使用ChartJS获取一组Date对象并根据一天中的时间显示频率

我有一组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>

我想制作一个简单的折线图，以显示与一天中任何给定时间匹配的日期的频率。

最佳答案

您必须使用如下数据：

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