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

【问题标题】：How to take a set of Date objects and display the frequency based on time of day using ChartJS如何使用 ChartJS 获取一组 Date 对象并根据一天中的时间显示频率
【发布时间】：2019-03-28 03:52:59
【问题描述】：

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

【解决方案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;
        }
      }
    }
  }]
}
 };

【讨论】：