如何读取JSON文件数据并赋值给Chart.js图表的data属性

问题原因 #

fetch是异步API，你初始化Chart.js图表时，fetch请求还没有返回结果，此时test数组是空值，因此图表读取不到对应数据。你在控制台看到test有内容是浏览器控制台的对象引用延迟更新特性，和代码实际执行顺序的时间点不一致。

解决方案1：数据加载完成后初始化图表 #

无需额外定义空数组存储数据，直接在fetch的回调中拿到数据后初始化图表即可，同时修正了Chart.js v3版本的x轴配置冲突、时间戳单位问题：

let myChart;

fetch("./load.json")
.then(response => response.json())
.then(data => {
    const chartData = {
        datasets: [{
            label: 'Sales',
            data: data,
            borderColor: 'rgba(234,124,234,0.4)',
            backgroundColor: 'rgba(34,14,24,0.4)'
        }]
    };
    const config = {
        type: 'line',
        data: chartData,
        options: {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'second',
                        min: 1628373600000, // 转换为毫秒级时间戳
                        max: 1628460000000
                    }
                },
                y: {
                    beginAtZero: true
                }
            }
        }
    };
    myChart = new Chart(document.getElementById('myChart'), config);
});

解决方案2：先初始化空图表，数据加载后更新 #

如果需要先渲染图表框架再异步加载数据，可以在拿到数据后更新数据集再调用刷新方法：

// 初始化空图表
const chartData = {
    datasets: [{
        label: 'Sales',
        data: [],
        borderColor: 'rgba(234,124,234,0.4)',
        backgroundColor: 'rgba(34,14,24,0.4)'
    }]
};
const config = {
    type: 'line',
    data: chartData,
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'second',
                    min: 1628373600000,
                    max: 1628460000000
                }
            },
            y: {
                beginAtZero: true
            }
        }
    }
};
const myChart = new Chart(document.getElementById('myChart'), config);

// 异步加载数据后更新图表
fetch("./load.json")
.then(response => response.json())
.then(data => {
    myChart.data.datasets[0].data = data;
    myChart.update();
});

额外注意事项 #

• 你原有代码中同时写了scales.x和scales.xAxes配置，Chart.js v3及以上版本已经废弃了xAxes数组写法，保留scales.x即可避免配置冲突
• 时间轴配置的min、max值需要为毫秒级时间戳，原有秒级时间戳要乘以1000转换，否则时间轴范围会显示异常

内容的提问来源于stack exchange，提问作者samuelhertrich