如何从 CSV 用 Javascript 制作折线图？答案

【问题标题】：How to make a line chart in Javascript from CSV?如何从 CSV 用 Javascript 制作折线图？
【发布时间】：2021-06-15 06:57:49
【问题描述】：

我是一名python开发人员，但有一小部分需要用Javascript完成，我无法弄清楚。

这只需要在本地计算机上完成。我有一个包含两列的.csv 文件，我需要制作一个实时折线图（它每 X 秒读取 csv 文件并刷新一次）。

我尝试了一些在线代码，它们仅适用于真实网址。我的文件是本地文件，所以我通过复制/粘贴尝试的所有代码都出现此错误。

CORS 策略已阻止从源“null”访问“file:///C:/Programs/Stock/test.csv”处的 XMLHttpRequest：跨源请求仅支持协议方案：http、数据、 chrome, chrome-extension, chrome-untrusted, https.

如果有人可以帮助我，那就太好了，否则我需要从头开始学习 Javascript。

CSV：https://wetransfer.com/downloads/632d4bc742d39f5fe8e820f62aa2e47d20210615070639/32404d

【问题讨论】：

嗨 Rahul，发送 CSV，我将在此处使用正确的代码发布整个项目
我认为对你来说最好使用像 d3js 这样的库来解决数据加载和图形部分，看看：d3-wiki.readthedocs.io/zh_CN/master/CSV
@BramheshSrivastava 非常感谢，编辑问题以包含 csv 链接
我试过了，但我得到了同样的错误（跨源请求等）@MarioSantini
抱歉，如果不禁用现代浏览器的安全性，就无法访问本地文件。 d3js 可以帮助您完成任务，但您必须设置一个仅在本地工作的最小 http 服务器来为您的页面和数据提供服务。

标签： javascript

【解决方案1】：

这是从 python 烧瓶和 HTML + JS 绘制数据的基本示例。

Python 代码：

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

@app.route("/")
def start():
    data = pd.read_csv('test.csv')
    x = data['time']
    y = data['value2']
    return render_template("a.html",x=list(x), y=list(y))

app.run()

HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.plot.ly/plotly-2.0.0.min.js"></script>
</head>
<body>

    <div id="myDiv">

    </div>
    <script>
        var trace1 = {
            x: {{x|safe}},
            y: {{y|safe}},
            type: 'scatter'
        };

        var data = [trace1];

        Plotly.newPlot('myDiv', data);
    </script>
</body>

</html>

这是一个非常基本的示例，您可以使用 flask-socketio 使其生效，然后您可以根据合适的条件发出数据。如果您需要任何帮助，请告诉我。

【讨论】：