Javascript 如何创建散点图，其中x轴用datetime对象按小时表示一天？chartJS

我正在用chartJS和react-chartJS-2创建散点图。我正在以以下格式获取x轴的数据：

2020-07-06T09:17:15.424+00:00

对于y轴，我将以以下格式获取数据：

HH:mm

我想要一个x轴，它代表一天一小时，所以它从00:00开始，到23:59或24:00结束。我的问题是如何将标签放入chartJS中，这样，如果我传递一个datetime对象或字符串，散点图会自动检测它的值，并将其精确地放在它所属的位置，而不是标签的行上

有没有办法做到这一点？

使用时，您不定义

标签

，而是将数据定义为一个对象数组，每个对象包含

x

和

y

属性

此外，还需要将

xAxis

定义为一个

请注意，Chart.js在内部用于时间轴的功能。因此，您应该使用Chart.js的名称，在单个文件中包含Moment.js

请看下面的可运行代码片段

var myChart=新图表（'myChart'{
键入：“散布”，
数据：{
数据集：[{
标签：“我的数据集”，
数据：[
{x:“05:22”，y:12}，
{x:“12:13”，y:19}，
{x:“13:45”，y:3}，
{x:“18:31”，y:5}，
{x:“19:05”，y:2}，
{x:“22:55”，y:3}
],
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
点半径：8，
点半径：8
}]
},
选项：{
回答：是的，
图例：{
显示：假
},
比例尺：{
xAxes:[{
键入：“时间”，
时间：{
解析器：“HH:mm”，
单位：小时，
步长：1，
显示格式：{
小时：“HH:mm”
},          
工具提示格式：“HH:mm”
},
滴答声：{
分钟：“00:00”，
马克斯：“24:00”，
回调：（值，索引）=>index==24？'24:00'：值
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
步长：5
}
}]
}
}
});

嘿，谢谢你的回答。我实际上使用的是react-chartjs-2，但我假设在那里构建的图形非常相似。我使用momentjs以及一个单独的库。我可以用我的代码更新我的帖子吗？你可以看到为什么它不能正确地为我工作。我对这个问题有点不知所措。基本上我的问题是，我需要传递一个力矩对象到x坐标，还是可以传递一个字符串，然后使用这里定义的选项？因为我尝试传递矩对象，它以毫秒而不是日期来格式化x轴。请针对这个单独的问题发布一个新问题。这将使我们更容易提供准确的答案。是的。嗯，我试着复制你的解决方案，但似乎不起作用。我以“HH:mm”格式将时间作为字符串传递到x，并使用与您相同的XAX选项。我的坏。。。我使用的是react-chartjs-2，我必须将选项作为独立于数据的变量传递。现在工作。