如何使用Javascript读取本地CSV文件绘制实时刷新折线图并解决CORS报错

问题解决方法 #

你碰到的CORS报错是浏览器的原生安全限制：直接双击打开本地HTML文件时用的是file://协议，浏览器默认禁止该协议下访问其他本地文件，换成http协议访问本地页面即可解决，不需要从零学习JS，按下面步骤操作即可。

方案1：启动本地临时HTTP服务（最适合Python开发者，操作成本最低） #

• 将你写的HTML页面文件、test.csv文件放在同一个文件夹内
• 打开终端，切换到上述文件夹的路径下，执行对应命令：
  • Python3环境：python -m http.server 8080
  • Python2环境：python -m SimpleHTTPServer 8080
• 打开浏览器地址栏输入http://localhost:8080，点击你的HTML文件即可正常运行，不会再出现跨域报错

可用的实时折线图代码示例 #

你可以直接复制以下代码保存为HTML文件，和CSV、依赖库文件放在同一个目录下即可使用，仅需要修改2个参数：

1. 把setInterval里的3000改成你需要的刷新间隔，单位是毫秒（比如要5秒刷新就填5000）
2. 如果你的CSV列名和示例不同，修改代码中对应读取列的字段名即可

<!DOCTYPE html>
<html>
<head>
  <script src="./Chart.min.js"></script>
  <script src="./papaparse.min.js"></script>
</head>
<body>
  <canvas id="lineChart" width="800" height="400"></canvas>
  <script>
    let chartInstance = null
    // 定时刷新数据
    setInterval(fetchDataAndRender, 3000)
    
    function fetchDataAndRender() {
      Papa.parse('./test.csv', {
        download: true,
        header: true,
        complete: function(results) {
          const xAxis = results.data.map(item => item.你的第一列列名)
          const yAxis = results.data.map(item => Number(item.你的第二列列名))
          renderChart(xAxis, yAxis)
        }
      })
    }

    function renderChart(xData, yData) {
      const ctx = document.getElementById('lineChart').getContext('2d')
      if(chartInstance) chartInstance.destroy()
      chartInstance = new Chart(ctx, {
        type: 'line',
        data: {
          labels: xData,
          datasets: [{
            label: '数据趋势',
            data: yData,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
          }]
        }
      })
    }
    // 页面加载时先渲染一次
    fetchDataAndRender()
  </script>
</body>
</html>

注：代码用到的PapaParse是CSV解析库、Chart.js是图表库，你可以自行下载这两个库的min.js文件放到同一目录下即可使用，无需额外配置。

方案2：无需启动服务的替代方案 #

如果不想启动本地服务，可以使用HTML5 File API，手动选择一次CSV文件后即可获得文件访问授权，后续定时读取不会触发跨域限制，也能满足需求。

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