如何将同目录下的CSV文件加载到Chart.js中？

核心流程：读取CSV → 解析数据 → 适配Chart.js格式 → 渲染图表 #

假设你的目录结构如下：

├── index.html
├── script.js
└── data.csv

1. 准备CSV示例数据（data.csv）

先创建一份结构清晰的CSV数据，比如：

月份,销量
1月,120
2月,190
3月,300
4月,250
5月,280

2. 用Fetch API读取CSV文件

在script.js中直接请求同目录下的data.csv（同源场景无需跨域处理）：

// 读取同目录下的CSV文件
fetch('data.csv')
  .then(response => {
    if (!response.ok) {
      throw new Error('加载失败：' + response.statusText);
    }
    return response.text();
  })
  .then(csvText => {
    const parsedData = parseCSV(csvText);
    initChart(parsedData);
  })
  .catch(error => {
    console.error('处理CSV出错：', error);
  });

3. 实现CSV解析函数

针对无复杂嵌套的简单CSV，写一个轻量解析函数：

function parseCSV(csvText) {
  // 按行分割并过滤空行
  const lines = csvText.split('\n').filter(line => line.trim());
  // 提取表头
  const headers = lines[0].split(',').map(item => item.trim());
  // 转换数据行为对象数组
  const rows = lines.slice(1).map(line => {
    const values = line.split(',').map(item => item.trim());
    return headers.reduce((obj, key, index) => {
      // 自动转换数值类型
      obj[key] = isNaN(Number(values[index])) ? values[index] : Number(values[index]);
      return obj;
    }, {});
  });
  return { headers, rows };
}

4. 适配Chart.js格式并初始化图表

将解析后的数据转换成Chart.js需要的标签和数据集格式：

function initChart(data) {
  const ctx = document.getElementById('myChart').getContext('2d');
  // 提取图表所需的标签和数据
  const labels = data.rows.map(row => row['月份']);
  const salesData = data.rows.map(row => row['销量']);

  new Chart(ctx, {
    type: 'bar', // 可替换为line、pie等图表类型
    data: {
      labels: labels,
      datasets: [{
        label: '月度销量',
        data: salesData,
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

5. HTML页面配置（index.html）

引入Chart.js并添加图表画布：

<!DOCTYPE html>
<html>
<head>
  <title>CSV数据可视化</title>
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script src="script.js"></script>
</body>
</html>

常见问题排查 #

• 确认CSV文件名、大小写与代码中一致，文件确实在同目录下
• 检查CSV格式，避免多余空行或字段分隔错误
• 打开浏览器控制台查看报错，404代表文件路径错误，格式报错则检查解析逻辑

内容的提问来源于stack exchange，提问作者Tan Jun Rong