如何在p5JavaScript中创建对象类与数组列表？堆叠条形图开发需求

嘿，我来帮你搞定这个p5.js堆叠条形图的数据结构问题！

在p5.js（本质是JavaScript）里，我们可以通过自定义对象类来封装每组数据，再用普通数组来管理这些对象（也就是你说的“数组列表”），这样就能轻松处理多组数据系列了。下面一步步给你讲具体实现：

1. 创建数据对象类 #

先定义一个BarData类，用来存储每组条形图的核心信息——比如系列名称、数值数组，甚至可以加上颜色属性，方便后续绘制时区分不同系列：

class BarData {
  constructor(name, values, color) {
    this.name = name; // 数据系列名称，比如"var1"
    this.values = values; // 对应X轴位置的数值数组，比如[10, 20, 30]
    this.color = color; // 该系列的显示颜色
  }
}

2. 构建数组列表（管理多组数据） #

接下来创建一个数组，把多个BarData实例存入其中，这就形成了你需要的“变量数组列表”：

// 示例：多组数值数组
const var1Values = [25, 40, 30, 55];
const var2Values = [15, 25, 20, 30];
const var3Values = [10, 15, 25, 20];

// 用来存储所有数据系列的数组列表
let barDataList = [];

function setup() {
  createCanvas(600, 400);
  
  // 将每组数据添加到数组列表中
  barDataList.push(new BarData("var1", var1Values, color(255, 107, 107)));
  barDataList.push(new BarData("var2", var2Values, color(107, 255, 160)));
  barDataList.push(new BarData("var3", var3Values, color(107, 185, 255)));
}

3. 绘制堆叠条形图 #

有了结构化的数据，绘制堆叠条形图就很清晰了——遍历数组列表，逐组累加数值，从下往上堆叠绘制条形：

function draw() {
  background(240);
  const barWidth = width / var1Values.length; // 每个条形组的宽度
  const maxValue = 100; // Y轴最大值，可根据实际数据动态计算
  const scaleY = height / maxValue; // Y轴缩放比例

  // 遍历每个X轴位置（对应一个条形组）
  for (let xIndex = 0; xIndex < var1Values.length; xIndex++) {
    let currentY = height; // 从画布底部开始绘制
    
    // 遍历每个数据系列，堆叠绘制
    for (let data of barDataList) {
      const barHeight = data.values[xIndex] * scaleY;
      fill(data.color);
      // 绘制条形：X坐标、Y坐标、宽度、高度
      rect(xIndex * barWidth, currentY - barHeight, barWidth - 5, barHeight);
      currentY -= barHeight; // 向上移动，准备绘制上一层条形
    }
  }
}

额外小提示 #

• JavaScript里没有专门的ArrayList类，但普通数组[]完全能实现相同功能，push()、splice()、forEach()这些方法足够灵活地管理你的数据系列。
• 如果需要动态添加/删除数据系列，直接调用数组的push()（添加）或splice(index, 1)（删除指定位置元素）即可。

这样你就能同时管理“数值数组”和“变量数组列表”，完美适配堆叠条形图的需求啦！

内容的提问来源于stack exchange，提问作者Loizos Vasileiou