Chart.js异步加载CSV数据异常：标签与数据仅展示单条且混乱

问题根源 #

• 遍历数组时错误修改原数组
  在getData的rows.forEach循环中，你执行了rows.push(cols)，这会在遍历过程中不断向rows数组添加新元素，导致遍历无法正常结束，最终xlabels和ylabels混入大量无效拆分结果，甚至覆盖正常数据。
• 未处理表头与空行
  CSV第一行是表头（Date,SignUps），直接处理会把表头当成数据；CSV末尾可能存在空行，拆分后得到空内容，会向数组中添加无效空值。
• 数据类型未转换
  CSV读取的数值是字符串类型，Chart.js的数据集需要数值类型，这也会导致图表渲染异常。

修复后的getData函数代码 #

async function getData() {
    const response = await fetch('stats.csv');
    const data = await response.text();
    const xlabels = [];
    const ylabels = [];
    const rows = data.split(/\n/);
    
    // 跳过表头，从第二行开始处理数据
    for (let i = 1; i < rows.length; i++) {
        const row = rows[i].trim();
        // 跳过空行
        if (!row) continue;
        
        const cols = row.split(',');
        // 确保拆分后有至少两列有效数据
        if (cols.length >= 2) {
            xlabels.push(cols[0]);
            // 将字符串转为数值，适配Chart.js数据要求
            ylabels.push(Number(cols[1]));
        }
    }

    console.log('xlabels: ', xlabels);
    console.log('ylabels: ', ylabels);
    return { xlabels, ylabels };
};

修改说明 #

1. 替换forEach为for循环，避免遍历过程中修改原数组引发的异常；
2. 从索引1开始遍历，跳过CSV表头行；
3. 用trim()清理行首尾空格，判断并跳过空行；
4. 检查列数，确保只有有效数据才添加到数组；
5. 将读取到的字符串数值转为Number类型，符合Chart.js对数据集的类型要求。

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