是否可以在 p5 JavaScript 中创建对象数组列表？

Question

我目前正在使用 p5JavaScript 制作堆积条形图演示，您可以在下面的代码片段中看到。

基本上，我想在 X&Y 轴上有 2 个系列的数据：

1) 数字数组 (var)

和

2) 变量的数组列表 (var1,var2,var3,...)。

我为此找到的唯一参考是下面提供的 link： https://sites.google.com/site/processingp5js/data-structures/arraylist

如果有人知道如何创建 "Class of Objects" 或数组列表，请告诉我。

脚本如下所示：

//REFERENCES:
//   https://sites.google.com/site/processingp5js/data-structures/arraylist

/* Needed Variables Declaration */
var arrayOfMonths = ["dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy"];
var arrayOfResponses = ["num","num","num","num","num","num","num"];

/* Calculated Variables */
var numOfMonths = arrayOfMonths.length;
var numOfResponses = arrayOfResponses.length;

/* Variables Declaration */
var canvasWidth = numOfMonths * 100;
var canvasHeight = numOfResponses * 100;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
} 

function draw() {
  background(255); //White Background Color
 chartBase(); //Add X,Y Axis
  addPointers(numOfResponses, numOfMonths); //Add Pointers
  addTextToPointers(); //Add Text to pointers
  //addValues(); //Add the Bars (Values) of the Chart
}

function chartBase(){
  
  /* DRAW X AXIS */
  line(canvasWidth-(canvasWidth-50), canvasHeight-100,
       (canvasWidth-50)+25, canvasHeight-100);
  
  /* DRAW Y AXIS */
 line(canvasHeight-(canvasHeight-100),canvasHeight-(canvasHeight-50)-25,
       canvasHeight-(canvasHeight-100),canvasHeight-50); 
}

function addPointers(numOfResponses, numOfMonths){
  
  var spaceBetweenX = canvasWidth - (canvasWidth-150);
 var spaceBetweenY = canvasHeight- 150;
  
  /* ADD POINTERS TO X AXIS */
  for(var x=0; x<numOfMonths; x++){
    
   ellipse(spaceBetweenX,canvasHeight-100,10,10);
    spaceBetweenX += canvasWidth/numOfMonths;
  }
  
  /* ADD POINTERS TO Y AXIS */
  for(var y=0; y<numOfResponses; y++){
    
   ellipse(canvasWidth-(canvasWidth-100), spaceBetweenY, 10, 10);
    spaceBetweenY -= canvasHeight/numOfResponses;
  }
  
}

function addTextToPointers(){

  var spaceBetweenX = canvasWidth-(canvasWidth-125);
 var spaceBetweenY=(canvasHeight-100)-50;
  textSize(13);
  
  /* ADD TEXT TO X AXIS */
  for(var x=0; x<numOfMonths; x++){
    
   var currentText = arrayOfMonths[x];
    text(currentText, spaceBetweenX, (canvasHeight-75));
    spaceBetweenX+=canvasWidth/numOfMonths;
  }
  
  /* ADD TEXT TO Y AXIS */
  for(var y=0; y<numOfResponses; y++){
  
    var currentText = arrayOfResponses[y];
    text(currentText, (canvasWidth-(canvasWidth-60)), spaceBetweenY);
    spaceBetweenY -= canvasHeight/numOfResponses;
  }
}

html, body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Answer 1

就用一个数组。

Java脚本中的数组与 Java 或处理中的 ArrayList class 非常相似。它们的大小可以改变，您可以动态地添加或移除元素。

查看 W3Schools or MDN 以获取有关 JavaScript 中数组的教程，或者 google "javascript arrays" 获取大量结果。

是否可以在 p5 JavaScript 中创建对象数组列表？

Is it possible to create an array list of objects in p5JavaScript?

arrays

charts

var

arraylist

p5.js

我目前正在使用 p5JavaScript 制作堆积条形图演示，您可以在下面的代码片段中看到。