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

Question

我有一组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>我想制作一个简单的折线图，以显示与一天中任何给定时间匹配的日期的频率。

Answer 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;

        }

      }

    }

  }]

}

 };