如何更新Chart.js折线图中两个数据集的data变量

要实现同时更新两个数据集的data，核心是同时修改两个数据集的data数组，再统一调用图表实例的update()方法触发重绘。以下是具体实现步骤和示例：

1. 初始化带双数据集的折线图 #

先创建基础的折线图实例，确保两个数据集（Mobile apps、Websites）正确配置：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [
            {
                label: 'Mobile apps',
                data: [12, 19, 3, 5, 2],
                borderColor: 'rgba(255, 99, 132, 1)',
                tension: 0.1
            },
            {
                label: 'Websites',
                data: [7, 11, 5, 8, 3],
                borderColor: 'rgba(54, 162, 235, 1)',
                tension: 0.1
            }
        ]
    },
    options: {
        responsive: true
    }
});

2. 定时更新双数据集 #

在setInterval中，先生成/获取两个数据集的新数据，同时赋值给对应数据集的data属性，最后调用myChart.update()：

// 每3秒更新一次数据
setInterval(() => {
    // 生成随机测试数据（替换成你的业务数据生成逻辑）
    const newMobileData = Array(5).fill().map(() => Math.floor(Math.random() * 20));
    const newWebsiteData = Array(5).fill().map(() => Math.floor(Math.random() * 20));

    // 同时更新两个数据集的data
    myChart.data.datasets[0].data = newMobileData; // 对应Mobile apps
    myChart.data.datasets[1].data = newWebsiteData; // 对应Websites

    // 触发图表重绘
    myChart.update();
}, 3000);

注意事项 #

• 确保数据集的索引和初始化顺序一致（0对应Mobile apps，1对应Websites），不要搞混索引导致更新错误
• 如果是异步获取数据（比如从接口拉取），要等两个数据集的新数据都准备好后再更新，避免出现一个更新、一个未更新的情况，示例如下：

setInterval(async () => {
    // 并行获取两个接口的数据
    const [mobileResp, websiteResp] = await Promise.all([
        fetch('/api/get-mobile-stats'),
        fetch('/api/get-website-stats')
    ]);
    const mobileData = await mobileResp.json();
    const websiteData = await websiteResp.json();

    // 统一更新并触发重绘
    myChart.data.datasets[0].data = mobileData;
    myChart.data.datasets[1].data = websiteData;
    myChart.update();
}, 3000);

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