Chart.js -解析对象数组

zmeyuzjn  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(195)

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...

bgtovc5b

bgtovc5b1#

好吧
我发现问题出在哪里了。代码确实可以工作。只是由于某种原因,它不能立即呈现。如果我调整窗口大小,它会将其绘制到屏幕上......
哦好吧。可以解决这个问题。谢谢你来找我

更新

我已经确定了图表绘制延迟的原因,并决定更新答案,以防任何人遇到类似问题。
我的图表代码似乎是在YTDTable中收集的数据完成之前执行的。我现在已经从javascript文件中删除了负责数据收集的代码块,并将其放在索引页的脚本块中。
这会导致数据收集早在图表代码执行之前就执行了。

相关问题