[英]chart.js plotting timeseries
试图将 django 中的数据传递到网页以呈现响应式图表。 数据被正确地传递给 js,但我让自己发疯,试图理解为什么charts.js 会抛出错误。
我已经硬编码了一些数据,例如:
function setLineChart() {
var ctx = document.getElementById("myLineChart").getContext('2d');
var dat_1 = {
label: 'things',
borderColor: 'blue',
data: [
{t: new Date("04/01/2020"), y: 310},
{t: new Date("04/02/2020"), y: 315},
{t: new Date("04/03/2020"), y: 320},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [dat_1]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})
}
<canvas id="myLineChart" width="600" height="600"></canvas>
这会返回一个Uncaught TypeError: Cannot read property 'skip' of undefined
error that I can debug。 setLineChart()
在表单更新时作为 ajax 响应的一部分被调用。 当我注释掉options
部分时,它确实呈现了一个图表,但错过了最后一个数据点,并且undefined
为 x 轴标记。
任何帮助,将不胜感激。
Chart.js 内部使用 Moment.js 来实现时间轴的功能。 因此,您应该使用在单个文件中包含 Moment.js 的 Chart.js 的捆绑版本。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
这将解决您的问题,如下面的修改代码片段所示。
var ctx = document.getElementById("myLineChart").getContext('2d'); var dat_1 = { label: 'things', borderColor: 'blue', data: [ { t: new Date("04/01/2020"), y: 310 }, { t: new Date("04/02/2020"), y: 315 }, { t: new Date("04/03/2020"), y: 320 }, ] }; var myLineChart = new Chart(ctx, { type: 'line', data: { datasets: [dat_1] }, options: { scales: { xAxes: [{ type: 'time', time: { unit: 'day' }, }], yAxes: [{ ticks: { beginAtZero: true } }] } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> <canvas id="myLineChart" height="90"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.