配列に格納されたデータから円グラフを生成するために arc() 関数を使用します。
arc array chart
Form Data
View Source Code
/*
* @name Pie Chart
* @arialabel Pie chart on a grey background with the different slices of the pie chart in various shades of grey
* @description Uses the arc() function to generate a pie chart from the data
* stored in an array.
*/
let angles = [30, 10, 45, 35, 60, 38, 75, 67];
function setup() {
// createCanvas(720, 400);
createCanvas(windowWidth, windowHeight);
noStroke();
noLoop(); // Run once and stop
}
function draw() {
background(100);
pieChart(300, angles);
}
function pieChart(diameter, data) {
let lastAngle = 0;
for (let i = 0; i < data.length; i++) {
let gray = map(i, 0, data.length, 0, 255);
fill(gray);
arc(
width / 2,
height / 2,
diameter,
diameter,
lastAngle,
lastAngle + radians(angles[i])
);
lastAngle += radians(angles[i]);
}
}
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.