Processingで円グラフを描画する方法の書き溜め
arc()関数をつかって描画できます。
難しいことはしていなくて、各値を全体の合計に対する割合から角度に変換して描画していく感じです。
コード例はこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// 各セグメントの値を格納する配列 int[] values = {25, 40, 35, 60, 20}; // 各セグメントの色を格納する配列 color[] colors = {color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(255, 255, 0), color(255, 0, 255)}; // 全セグメントの値の合計を格納する変数 int total = 0; void setup() { // キャンバスのサイズを設定 size(400, 400); // セグメント間の境界線を描画しない noStroke(); // values配列の全ての値の合計を計算 for (int i = 0; i < values.length; i++) { total += values[i]; } drawPieChart(200, values, colors); } void drawPieChart(int diameter, int[] data, color[] colors) { // 前のセグメントの終了角度を保持する変数 float lastAngle = 0; // 各セグメントに対して処理を行う for (int i = 0; i < data.length; i++) { // 現在のセグメントの色を設定 fill(colors[i]); // 現在のセグメントの値を全体の合計に対する割合から角度に変換 float angle = map(data[i], 0, total, 0, TWO_PI); // arc()関数を使用して円グラフのセグメントを描画 // (描画の中心x, 描画の中心y, 幅, 高さ, 開始角度, 終了角度) arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle + angle); // 終了角度を更新 lastAngle += angle; } } |
実行結果はこんな感じ。
arc()関数については公式サイトに詳しく書いてあるから参考にしてね
じゃあねー。