Chart.js版本- 3.8.0(最新版本)
大家好
此刻我对此失去了理智。我已经能够成功地显示图表一次。从那时起,它就无法渲染,我不知道为什么。
我在声明图表选项之前构建了一个对象数组(计算多个csv文件中的行数),然后根据chart js网站上的示例传递了这个数组。
我有输出到控制台,以确保数据被正确加载,一切看起来都很好。有人能看看下面的代码,并指出任何明显的?
const data = YTDTable;
var ctx1 = document.getElementById('YTD').getContext('2d');
var myChart1 = new Chart(ctx1, {
type: 'bar',
data: {
datasets: [{
data: data,
label: "Tickets to Date"
}]
},
options: {
parsing: {
xAxisKey: 'month',
yAxisKey: 'count'
}
},
});
这是在上述代码块之后执行的**console.log(myChart1.data)**的数据集输出:
{
"datasets": [
{
"data": [
{
"month": "January",
"count": 1629
},
{
"month": "February",
"count": 1832
},
{
"month": "April",
"count": 1626
},
{
"month": "May",
"count": 2034
},
{
"month": "March",
"count": 1802
},
{
"month": "June",
"count": 1585
}
],
"label": "Test"
}
],
"labels": []
}
我只是不明白为什么上面的代码不工作。任何帮助都非常感谢
屏幕上的图表输出:chart image - can't embed images yet...
1条答案
按热度按时间bgtovc5b1#
好吧
我发现问题出在哪里了。代码确实可以工作。只是由于某种原因,它不能立即呈现。如果我调整窗口大小,它会将其绘制到屏幕上......
哦好吧。可以解决这个问题。谢谢你来找我
更新
我已经确定了图表绘制延迟的原因,并决定更新答案,以防任何人遇到类似问题。
我的图表代码似乎是在YTDTable中收集的数据完成之前执行的。我现在已经从javascript文件中删除了负责数据收集的代码块,并将其放在索引页的脚本块中。
这会导致数据收集早在图表代码执行之前就执行了。