ChartJS不使用Moment.js显示时间数据 [英] ChartJS not displaying time data using Moment.js
问题描述
我正在尝试按小时绘制给定日期的一系列数据点.数据集中并没有包含每个小时,但是我仍然想显示从0:00-23:00的时间,并绘制可用的数据点.
I am trying to map out a series of data points on a given day by the hour. Not every hour is included in the data set, however I still want to show the time from 0:00 - 23:00 and plot the data points that is available.
我的错误是
此方法未实现:找不到适配器或提供了不完整的集成.
This method is not implemented: either no adapter can be found or an incomplete integration was provided.
但是,请查看文档和此<一个href ="https://code.tutsplus.com/tutorials/getting-started-with-chartjs-scales--cms-28477" rel ="nofollow noreferrer">教程,我仍然会收到错误消息.
However, Looking at the documentation and this tutorial, I still get the error.
在我的 hourlyData
集中,x是小时,y是金额.
In my hourlyData
set, x is the hour and y is the amount.
有人可以看到我在做什么错吗?
Can anyone see what I am doing wrong?
$(document).ready(function() {
var ctx = document.getElementById('chart_hourlycalls').getContext('2d');
var hourlyData = [{
"x": "1",
"y": "1"
}, {
"x": "3",
"y": "2"
}, {
"x": "5",
"y": "1"
}, {
"x": "6",
"y": "13"
}, {
"x": "7",
"y": "13"
}, {
"x": "8",
"y": "5"
}, {
"x": "9",
"y": "9"
}, {
"x": "10",
"y": "14"
}, {
"x": "11",
"y": "24"
}, {
"x": "12",
"y": "5"
}];
var labels = hourlyData.map(e => moment(e.x, 'HH'));
var data = hourlyData.map(e => e.y);
var options = {
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Calls'
},
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH a'
}
},
display: true,
scaleLabel: {
display: true,
labelString: 'Hour'
}
}]
},
tooltips: {
enabled: true
},
};
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
data: data
},
options: options
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<canvas id="chart_hourlycalls"></canvas>
推荐答案
您可以尝试将moment.js脚本放在chart.js上方.但是,这是一个使用moment.js的示例,可能会为您提供帮助.
You could try to put the moment.js script above the chart.js. However here is an example of using moment.js that may help you.
https://stackoverflow.com/a/58555196/12176979
这篇关于ChartJS不使用Moment.js显示时间数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!