在 Javascript 中读取文本或 csv 文件并重绘图表

Question

我是 Javascript 新手，想知道如何通过调用从 txt 或 csv 文件中读取数据来替换当前包含在 .js 文件中的数据。因此，而不是...

const chart = some_application.createChart(document.body, {width: 500, height: 400});

const lineSeries = chart.addLineSeries();

lineSeries.setData([
  { time: '2020-07-11', value: 90.11 },
  { time: '2020-07-12', value: 95.43 },
  { time: '2020-07-13', value: 96.24 },
  { time: '2020-07-14', value: 91.81 },
  { time: '2020-07-15', value: 94.33 },
  { time: '2020-07-16', value: 87.41 },
  { time: '2020-07-17', value: 93.33 },
  { time: '2020-07-18', value: 85.24 },
  { time: '2020-07-19', value: 84.39 },
  { time: '2020-07-20', value: 78.83 },
]);

...我想将 10 个数据行“{ time: ... }, ...”放在 txt 或 csv 文件中，例如 time_value.txt 或time_value.csv.

b) 有没有办法在新数据到来并且数据文件更新时再次加载文件，并重新绘制图表？

此文件将嵌入在另一个应用程序中运行，它是创建对其他库依赖最少的解决方案的理想选择。因此，如果它可以在非常基本的标准 Javascript 命令上运行，那将有利于兼容性。

谢谢

Answer 1

最简单的方法是使用setInterval 和fetch 的组合来定期请求数据。这些没有外部依赖项，因此您可以执行以下操作：

        // handle the new data. For now, just parse the JSON and log to the console.
        function setData(data) {
            data.forEach(el => {
                console.log(el);
            });
        }
        // function to retrieve the data from the server.
        async function fetchData() {
            console.log("fetching data");
            await fetch('textFile.json')
            .then(resp=>{
                if (resp.ok) {
                    resp.json()
                    .then(newData=>setData(newData));
                }
            });
        }
        // setInterval calls fetchData every 10 seconds.
        let interval = setInterval(fetchData, 10000);

因此，如果您的服务器将新数据放在网站上的文件中，则此代码可以每十秒更新一次图表。这个 sn-p 假设 JSON 格式的数据，但你可以使用它。

这里的缺点是客户端必须等待最多十秒钟（或您选择的任何时间段）才能获取新数据。如果数据不经常更改，那可能无关紧要。如果数据经常更改和/或您拥有庞大的客户群，这可能不适合您。

如果延迟是一个问题，那么您可以使用WebSocket 让服务器将新数据通知工作站，但这需要服务器上的新代码来处理它。