我正在尝试按小时绘制给定日期的一系列数据点。数据集中并没有包含每个小时,但是我仍然想显示从0:00-23:00的时间,并绘制可用的数据点。
我的错误是
此方法未实现:找不到适配器或提供了不完整的集成。
但是,看着documentation和这个tutorial,仍然出现错误。
在我的hourlyData
集中,x是小时,y是金额。
谁能看到我在做什么错吗?
<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>
<script type="application/javascript">
$(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>
[尝试使用time axis类型且尚未加载Moment.js时显示该错误。
Chart.js文档可能更清晰,但在installation page中有解释:
Chart.js提供了两种不同的版本供您选择:独立版本,捆绑版本。
独立构建(可能现在正在使用的内容):
包括Chart.js以及颜色解析库。 如果使用此版本,则要求在Chart.js之前包括Moment.js以提供时间轴的功能。
捆绑的版本(可能应该使用的东西):
将Moment.js包含在一个文件中。 [如果需要时间轴并要包含单个文件,则应使用此版本。如果应用程序已包含Moment.js,则不应使用此版本。