Pie Chart / 円グラフ

配列に格納されたデータから円グラフを生成するために 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.