Javascript 如何在chart.js中创建时间序列折线图？

我创建了一个python脚本，它从API获取数据，以获取特定时间的天气温度

结果是一个CSV文件，如下所示：

Time,Temperature
2020-02-15 18:37:39,-8.25
2020-02-15 19:07:39,-8.08
2020-02-15 19:37:39,-8.41
2020-02-15 20:07:39,-8.2

如何将CSV转换为JavaScript数组，并从中生成Chart.js折线图

现在，我有一个Chart.js基本脚本，看起来像这样（没有填充任何数据）

---

基本上，转换每个文件行字符串：

2020-02-15 18:37:39,-8.25 

{x: "2020-02-15 18:37:39", y: -8.25}

放入对象中：

2020-02-15 18:37:39,-8.25 

{x: "2020-02-15 18:37:39", y: -8.25}

要存储在Chart.js

数据中：[]

数组

下面是一个示例，介绍如何创建一个函数

csvToChartData（）

，该函数返回这样一个数组（类似于：…

data:csvToChartData（csv）

）

• 通过换行将文件字符串修剪并拆分成

  行数组
  使用
  line.shift（）删除标题（第一个数组键）
  
  将每一行转换为一个对象
  {x:date，y:temperature}
  ，方法是用逗号分隔每一行。拆分（'，）

• 将新映射的数组（使用

  .map（）

  ）作为图表数据传递：

const csv=`时间、温度
2020-02-15 18:37:39,-8.25
2020-02-15 19:07:39,-8.08
2020-02-15 19:37:39,-8.41
2020-02-15 20:07:39,-8.2`;
const csvToChartData=csv=>{
常量行=csv.trim（）.split（'\n'）；
lines.shift（）；//删除标题（第一行）
返回行。映射（行=>{
常数[日期，温度]=行分割（'，'）；
返回{
x:日期，
y:温度
}
});
};
const ctx=document.querySelector（“#折线图”）.getContext（'2d'）；
常量配置={
键入：“行”，
数据：{
标签：[]，
数据集：[{
数据：csvToChartData（csv），
标签：“温度”，
边框颜色：“3e95cd”，
填充：假
}]
},
选项：{
比例：{
xAxes：[{
键入：“时间”，
分布：'线性'，
}],
标题：{
显示：假，
}
}
}
};
新图表（ctx，配置）
#折线图{
显示：块；
宽度：100%；
}

步骤1通常是“使用某种CSV阅读器”。你试过什么？哇！工作起来很有魅力！我想我可以将const csv值设置为csv读取器，使其自动更新？
const csv=
应该指向csv字符串，是的。对于自动/动态更新，您应该考虑CART.JS文档，您是否知道如何在编辑CSV时自动使我的图表更新（假设API写一个新的行到文件）？可以将
const csv
设置为csv？@Power\u Lemming的字符串内容。您可以使用WebSockets来保持与服务器的“轮询”连接（通过非常小的数据包）的活动通道。为此，创建一个后端逻辑（Node.js），在文件更改后，该逻辑将用新的CVS数据通知侦听通道。另一种更简单的方法是（比如说每分钟或30秒）使用AJAX ping服务器，并简单地联系后端脚本，如果CSV文件的修改日期更改，它将返回新数据（或者如果没有更改，则返回
0
或
null
。@新手我认为
.filter（）应该不难
通过某种“时间”条件将
行
数组。过滤完成后，只需返回过滤后的（而不是整个）数组。