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

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何根据一天中的时间显示消息?

来自分类Dev

一组列作为 Mysql 中的唯一键,但使用时间戳作为一天

来自分类Dev

根据一天中的时间显示/隐藏标签

来自分类Dev

如何根据一天中的时间延迟启动?

来自分类Dev

如何根据一天中的时间延迟启动?

来自分类Dev

使用Javascript根据星期几和一天中的时间显示HTML元素

来自分类Dev

彩条显示一天中的时间

来自分类Dev

使用date()函数,如何获取每月的每一天?

来自分类Dev

Swift:如何根据一天中的当前时间显示两个图像之一

来自分类Dev

如何使用PHP date()函数格式化输入字段以形成一天中的时间?

来自分类Dev

在SQL / LookerML中,如何测量一组天的平均计数,每一天都有自己的数据点

来自分类Dev

如何获取月份中的一天

来自分类Dev

根据缺货状态和一天中的时间在购物车页面上显示div

来自分类Dev

根据一天中的时间显示不同的复选框

来自分类Dev

根据一天中的时间更改Chrome主页

来自分类Dev

根据一天中的时间更改屏幕颜色

来自分类Dev

根据一天中的时间更改背景DIV

来自分类Dev

根据一天中的时间运行脚本

来自分类Dev

jQuery根据一天中的时间更改视频海报

来自分类Dev

根据一天中的时间设置变量

来自分类Dev

根据一天中的时间转到新的html文件

来自分类Dev

创建根据一天中的时间运行的功能

来自分类Dev

根据一天中的时间更改网站的索引

来自分类Dev

根据一天中的时间添加课程

来自分类Dev

c#如何获取对象列表及其频率的所有唯一组合

来自分类Dev

如何从Firebase获取一组对象?

来自分类Dev

根据一天中的时间显示内容(在一周的不同日期更改时间)

来自分类Dev

如何获取对象的时间属性覆盖最后一天的查询集?

来自分类Dev

如何获取特定时区中一天中特定时间的纪元时间?

Related 相关文章

  1. 1

    如何根据一天中的时间显示消息?

  2. 2

    一组列作为 Mysql 中的唯一键,但使用时间戳作为一天

  3. 3

    根据一天中的时间显示/隐藏标签

  4. 4

    如何根据一天中的时间延迟启动?

  5. 5

    如何根据一天中的时间延迟启动?

  6. 6

    使用Javascript根据星期几和一天中的时间显示HTML元素

  7. 7

    彩条显示一天中的时间

  8. 8

    使用date()函数,如何获取每月的每一天?

  9. 9

    Swift:如何根据一天中的当前时间显示两个图像之一

  10. 10

    如何使用PHP date()函数格式化输入字段以形成一天中的时间?

  11. 11

    在SQL / LookerML中,如何测量一组天的平均计数,每一天都有自己的数据点

  12. 12

    如何获取月份中的一天

  13. 13

    根据缺货状态和一天中的时间在购物车页面上显示div

  14. 14

    根据一天中的时间显示不同的复选框

  15. 15

    根据一天中的时间更改Chrome主页

  16. 16

    根据一天中的时间更改屏幕颜色

  17. 17

    根据一天中的时间更改背景DIV

  18. 18

    根据一天中的时间运行脚本

  19. 19

    jQuery根据一天中的时间更改视频海报

  20. 20

    根据一天中的时间设置变量

  21. 21

    根据一天中的时间转到新的html文件

  22. 22

    创建根据一天中的时间运行的功能

  23. 23

    根据一天中的时间更改网站的索引

  24. 24

    根据一天中的时间添加课程

  25. 25

    c#如何获取对象列表及其频率的所有唯一组合

  26. 26

    如何从Firebase获取一组对象?

  27. 27

    根据一天中的时间显示内容(在一周的不同日期更改时间)

  28. 28

    如何获取对象的时间属性覆盖最后一天的查询集?

  29. 29

    如何获取特定时区中一天中特定时间的纪元时间?

热门标签

归档