是否可以在p5JavaScript中创建对象的数组列表？
是否可以在p5JavaScript中创建对象的数组列表？
提问于 2018-04-08 19:48:45
我目前正在使用p5JavaScript进行一个堆叠条形图演示，正如您在下面的代码片段中看到的那样。
基本上，我希望在X&Y轴上有2组数据：
1)数字数组(var)
和
2)数组-变量列表(var1，var2，var3，.)。
我找到的唯一参考是下面提供的链接：https://sites.google.com/site/processingp5js/data-structures/arraylist
如果有人知道如何创建“类对象”或数组列表，请告诉我。
脚本如下所示：
//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>
回答 1
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49722071
复制相关文章
相似问题
腾讯云开发者
