尝试将数据从 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
错误。 setLineChart()
在表单更新时作为 ajax 响应的一部分被调用。当我注释掉 options
部分时,它确实渲染了一个图表,但错过了最后一个数据点,并且将 undefined
作为 x 轴标记。
如有任何帮助,我们将不胜感激。
最佳答案
Chart.js 在内部使用 Moment.js 来实现 time axis 的功能。因此您应该使用bundled version Chart.js 的一部分,其中在单个文件中包含 Moment.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>
关于javascript - Chart.js 绘制时间序列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61062554/