柱状图用p5js怎么花
时间: 2023-10-15 16:02:45 浏览: 35
以下是一个用p5js画柱状图的示例:
```javascript
let data = [10, 30, 50, 70, 90]; //数据
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
textSize(20);
textAlign(CENTER);
fill(0);
text("柱状图", width / 2, 30);
let barWidth = width / data.length - 10; //柱子的宽度
let maxValue = max(data); //数据的最大值
let maxHeight = height - 80; //柱子最大高度
//画每个柱子
for (let i = 0; i < data.length; i++) {
let x = i * (barWidth + 10) + 50; //柱子的x坐标
let h = map(data[i], 0, maxValue, 0, maxHeight); //柱子的高度
let y = height - h - 50; //柱子的y坐标
//画柱子
fill(50, 150, 200);
rect(x, y, barWidth, h);
//画数据标签
fill(0);
textSize(14);
textAlign(CENTER);
text(data[i], x + barWidth / 2, y - 5);
}
}
```
这个示例中,我们首先定义了一个数据数组,然后在setup函数中创建了一个400x400的画布。在draw函数中,我们先画了一个标题,然后计算了每个柱子的宽度、数据的最大值和柱子的最大高度。接着,我们使用for循环画出每个柱子,并且在每个柱子上画了数据标签。最后,我们就得到了一个简单的柱状图。