如何使用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 条评论
登录 后参与评论

相关文章

如何使用JavaScript获取一周中的第一天和最后一天

如何在vba中查找一组数据的月份的第一天

如何使用Apache DateUtils来获取第一天到第一天最后一天的时间[JAVA]?

重新采样时间序列并显示一天中的时间

如何从一组复杂的对象中获取一组唯一的属性

如何使数字显示为hh:mm(持续时间,而不是一天中的时间)

根据一天中的时间选择DataFrame中的行?

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

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

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

彩条显示一天中的时间

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何获取月份中的一天

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

ggplot:如何从日期时间中提取一天中的时间并仍然获取日期类型?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档