时间戳

首页 > 解决方案 > 在 Javascript 中读取文本或 csv 文件并重绘图表

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

问题描述

我是 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 命令上运行，那将有利于兼容性。

谢谢

标签： javascriptcsvreloadtxt

解决方案

最简单的方法是结合使用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);

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

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

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

推荐阅读