棒グラフをプログラムで作ってみる

      棒グラフをプログラムで作ってみる へのコメントはまだありません

それでは、プログラムで棒グラフを作ってみましょう。

2016_06_27_19_42

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

PFont myFont;    //フォント用変数
 
int a = 10;    //a〜fはそれぞれのバーの値
int b = 14;
int c = 20;
int d = 80;
int e = 2;
int f = 18;
float barW;  //バーの横幅
 
size(400, 400);
background(255);
 
myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);
 
barW = 40;  //バーの横幅を40ピクセルにする
 
fill(127);    //グレーで描画
rect(0, height - a, barW, a);    //一つずつバーを描画
rect(barW*1, height - b, barW, b);
rect(barW*2, height - c, barW, c);
rect(barW*3, height - d, barW, d);
rect(barW*4, height - e, barW, e);
rect(barW*5, height - f, barW, f);
 
fill(255, 0, 0);    //赤で描画
text("a = " + a, barW/2, height - a - 10);    //テキストを描画
text("b = " + b, barW*1 + barW/2, height - b - 10);
text("c = " + c, barW*2 + barW/2, height - c - 10);
text("d = " + d, barW*3 + barW/2, height - d - 10);
text("e = " + e, barW*4 + barW/2, height - e - 10);
text("f = " + f, barW*5 + barW/2, height - f - 10);

これを、配列で書き換えてみましょう。コードはかなり短くなります。こういった用途も、配列の利点を表しています。

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

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};
 
float barW;  //バーの横幅
 
size(400, 400);
background(255);
 
myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);
 
barW = 40;  //バーの横幅を40ピクセルにする
 
//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す
 
  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i];
 
  fill(127);    //グレーで描画
  rect(x, y, barW, value[i]);
 
  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

次に、もう少し柔軟な表示が可能になるプログラムに書き換えてみます。バーのサイズが画面の横幅に応じて変化します。

2016_06_27_19_44

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

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};
 
float barW;  //バーの横幅
 
size(400, 400);
background(255);
 
myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);
 
barW = width / float(value.length);  //バーの横幅を決定
 
//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す
 
  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i];
 
  fill(127);    //グレーで描画
  rect(x, y, barW, value[i]);
 
  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

 
 

このままだとちょっと高さが低くて差が分かりづらいので、バーの高さを画面の高さに合わせて拡大します。

2016_06_27_19_45

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

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};
 
float barW;  //バーの横幅
float barH;
float resize = 4.0; 
 
size(400, 400);
background(255);
 
myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);
 
barW = width / float(value.length);  //バーの横幅を決定
 
//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す
 
  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i] * resize;
  barH = value[i] * resize;
 
  fill(127);    //グレーで描画
  rect(x, y, barW, barH);
 
  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

さらに、左右と下の余白、バー同士の余白も作ってみましょう。

2016_06_27_20_08

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

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};
 
float barW;  //バーの横幅
float barH;
float resize = 3.0; 
float margin = 20.0;  //左右と底辺の余白
float space = 4.0;
 
size(400, 400);
background(255);
 
myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);
 
barW = (width - margin * 2 - (value.length - 1) * space) / float(value.length);  //バーの横幅を決定
 
//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す
 
  //バーのx座標, y座標を計算
  float x = (barW + space) * i + margin;
  float y = height - value[i] * resize - margin;
  barH = value[i] * resize;
 
  fill(127);    //グレーで描画
  rect(x, y, barW, barH);
 
  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}