如何在p5.js中使用多个数据集绘制多条折线图

核心错误定位 #

你写的预加载代码存在变量名拼写错误：全局声明的第二个数据集变量为canonattacksdataset，但在preload函数中赋值时误写为canonaattacksdataset（多了1个字母a），导致第二个数据集加载完成后没有存入正确的全局变量，后续绘制时拿不到数据，所以新增的逻辑不生效。

修正&实现步骤 #

1. 修正预加载代码 #

修正拼写问题后的预加载逻辑如下：

let burnsdataset;
let canonattacksdataset;

function preload() {
  // 加载burns数据集
  burnsdataset = loadTable("burns.csv", "csv", "header");
  // 加载canonattacks数据集
  canonattacksdataset = loadTable("canonattacks.csv", "csv", "header");
}

2. 新增第二条折线的绘制逻辑 #

你已经完成了第一条折线的坐标映射、描点连线逻辑，直接复用这套逻辑处理第二个数据集即可，注意更换描边颜色做区分：

• 在draw函数中第一条折线绘制完成后，新增stroke(255, 0, 0)（可自定义其他颜色）切换笔触颜色
• 遍历canonattacksdataset的所有行，和第一条折线的处理逻辑一致，完成数值到画布坐标的映射，再执行描点、连线操作即可

3. 可选优化：添加图例 #

可在画布空白角落绘制两个对应颜色的小色块，旁边标注对应数据集名称，方便区分两条折线的含义。

内容的提问来源于stack exchange，提问作者Ariel Koh Qing Wen