如何使用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

您必须使用如下数据：&nbsp; 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 ];&nbsp; 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',&nbsp; &nbsp; '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'&nbsp; ];使用此选项效果很好：var options = {responsive: true,legend: {&nbsp; display: false},scales: {&nbsp; yAxes: [{&nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; beginAtZero: true,&nbsp; &nbsp; &nbsp; callback: function(value) {&nbsp; &nbsp; &nbsp; &nbsp; if (Number.isInteger(value)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return value;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }]}&nbsp;};