TECHNICAL INFORMATION技術情報

第10回(応用編-2)
  はじめてみよう JavaScript プログラミング
 前回は、簡単な棒グラフを書いたところで終わりにしましたので、今回は、もう少し複雑なグラフを書いてみることにします。
 前回使った、幅・高さともに1ピクセルで、透明:img001.gif、白:img002.gif、赤:img003.gif、青:img004.gif の4ファイルに加え、黒:img005.gif、緑:img006.gif の2ファイルを用意しました。

積み上げ縦棒グラフ

 縦棒グラフの、積み上げグラフの例です。ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function disp() { var i,data=0,datb; var dat=new Array(); for(i=0;i<=7;i++) { dat[i]=eval(document.form01.elements[i].value); if(i%2==1) data=Math.max(data,dat[i]+dat[i-1]); } data=Math.ceil(data*0.1)*10; document.write("<table cellspacing='5'><tr valign='bottom' align='center'>"); document.write("<td height='100' align='right' valign='top'>"+data+"</td>"); document.write("<td align='right' rowspan='3'><img src='img005.gif' width='10' height='2'><br>"); document.write("<img src='img005.gif' width='2' height='147'><br>"); document.write("<img src='img005.gif' width='10' height='2'><br>"); document.write("<img src='img005.gif' width='2' height='147'><br>"); document.write("<img src='img005.gif' width='10' height='2'></td>"); for(i=0;i<=7;i++) { datb=Math.floor((dat[i]/data)*300); if(i%2==0) document.write("<td rowspan='3'><img src='img003.gif' width='30' height='"+datb+"'><br>"); else document.write("<img src='img004.gif' width='30' height='"+datb+"'></td>"); } document.write("</tr><tr><td height='100' align='right'>"+data/2+"</td>"); document.write("</tr><tr><td height='100' align='right' valign='bottom'>0</td>"); document.write("</tr><tr valign='bottom' align='center'><td></td><td></td> <td>1月</td><td>2月</td><td>3月</td><td>4月</td></tr></table>"); document.close(); } </script> </head> <body> <form name="form01"> ■色別の売れた数量推移グラフ(縦棒)<p> <table> <tr align="center"><td></td><td>赤</td><td>青</td></tr> <tr><td>1月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>2月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>3月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>4月</td><td><input type="text"></td><td><input type="text"></td></tr> </table> <input type="button" value="グラフ表示" onclick="disp()"><p> </form> </body> </html>

 フォーム form01 のテキストボックスの値をはじから読んで配列 dat に入れます。このとき、赤と青の計 dat[0] + dat[1] というような、積み上がる高さの、最大値の下一桁を切り上げた値を data として、この値の棒の長さを300ピクセルにし、各値の data に対する比率の長さの棒を書いています。偶数番目の dat のときは、表のセルを作ってから赤色棒 img003.gif を書き改行、奇数番目の dat のときは、青色棒 img004.gif を書いてからセルを閉じます。
 グラフの棒を書くのは、それほど面倒ではありませんが、左側に目盛りを表示するための処理の方が複雑になっています。目盛りの数値と目盛り線を表示するために、テーブルのセルのサイズ、水平位置、垂直位置を指定しています。

積み上げ横棒グラフ

 一般的に、横方向にした方が簡単です。ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function disp() { var i,data=0,datb; var dat=new Array(); var lab=new Array("1月","2月","3月","4月"); for(i=0;i<=7;i++) { dat[i]=eval(document.form01.elements[i].value); if(i%2==1) data=Math.max(data,dat[i]+dat[i-1]); } data=Math.ceil(data*0.1)*10; document.write("<table cellspacing='5'>"); for(i=0;i<=7;i++) { datb=Math.floor((dat[i]/data)*300); if(i%2==0) document.write("<tr><td>"+lab[i/2]+"</td><td><img src='img003.gif' width='"+datb+"' height='30'>"); else document.write("<img src='img004.gif' width='"+datb+"' height='30'> "+dat[i-1]+" / "+dat[i]+"</td></tr>"); } document.write("<tr><td></td><td><img src='img005.gif' width='2' height='6'><img src='img005.gif' width='148' height='2' align='top'><img src='img005.gif' width='2' height='6'><img src='img005.gif' width='148' height='2' align='top'><img src='img005.gif' width='2' height='6'></td></tr>"); document.write("<tr><td></td><td>0<img src='img001.gif' width='140' height='1'>"+data/2+"<img src='img001.gif' width='140' height='1'>"+data+"</td></tr>"); document.write("</table>"); document.close(); } </script> </head> <body> <form name="form01"> ■色別の売れた数量推移グラフ(横棒)<p> <table> <tr align="center"><td></td><td>赤</td><td>青</td></tr> <tr><td>1月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>2月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>3月</td><td><input type="text"></td><td><input type="text"></td></tr> <tr><td>4月</td><td><input type="text"></td><td><input type="text"></td></tr> </table> <input type="button" value="グラフ表示" onclick="disp()"><p> </form> </body> </html>

 値を棒の右に表示しました。基本的に、やっていることは上の縦棒グラフと同じです。偶数番目の dat のときは、表の行とセルを作って、項目名 lab を書き、次のセルに赤色棒 img003.gif を書きます。奇数番目の dat のときは、青色棒 img004.gif を書いた後に各値を書いて、セルを閉じます。

積み上げ面グラフ

 積み上げ面グラフを書くのは、棒グラフと比べるとけっこう大変です。赤と青だけではさみしいので、緑も追加しました。12のテキストボックスに入力するのがちょっと面倒だと思うので、適当な初期値を入力してあります。 ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> var data=0,win01; function disp01(dr,db,dg,r,b,g,i) { var datr,datb,datg; datr=Math.floor(((r+dr*i)/data)*300); datb=Math.floor(((b+db*i)/data)*300); datg=Math.floor(((g+dg*i)/data)*300); win01.document.write("<img src='img003.gif' width='"+datr+"' height='1'>"); win01.document.write("<img src='img004.gif' width='"+datb+"' height='1'>"); win01.document.write("<img src='img006.gif' width='"+datg+"' height='1'><br>"); } function disp() { var i,j,datb,dr,db,dg; var dat=new Array(); for(i=0;i<=11;i++) { dat[i]=eval(document.form01.elements[i].value); if(i%3==2) data=Math.max(data,dat[i]+dat[i-1]+dat[i-2]); } data=Math.ceil(data*0.1)*10; win01=window.open("","","width=600,height=400"); win01.document.write("<table cellpadding='0' cellspacing='0'>"); win01.document.write("<tr><td>1月</td>"); win01.document.write("<td rowspan='4'><img src='img001.gif' width='1' height='25'><br>"); for(j=0;j<3;j++) { dr=(dat[j*3+3]-dat[j*3])/50; db=(dat[j*3+4]-dat[j*3+1])/50; dg=(dat[j*3+5]-dat[j*3+2])/50; for(i=0;i<50;i++) disp01(dr,db,dg,dat[j*3],dat[j*3+1],dat[j*3+2],i); } win01.document.write("<img src='img001.gif' width='1' height='25'></td>"); for(j=0;j<=3;j++) { win01.document.write("<td>"+dat[j*3]+" / "+dat[j*3+1]+" / "+dat[j*3+2]+"</td>"); if(j<3) win01.document.write("</tr><tr><td>"+(j+2)+"月</td>"); } win01.document.write("</tr></table>"); win01.document.close(); } </script> </head> <body> <form name="form01"> ■色別の売れた数量推移グラフ(積み上げ面)<p> <table> <tr align="center"><td></td><td>赤</td><td>青</td><td>緑</td></tr> <tr><td>1月</td><td><input type="text" value="20"></td><td><input type="text" value="45"></td> <td><input type="text" value="22"></td></tr> <tr><td>2月</td><td><input type="text" value="65"></td><td><input type="text" value="40"></td> <td><input type="text" value="15"></td></tr> <tr><td>3月</td><td><input type="text" value="50"></td><td><input type="text" value="20"></td> <td><input type="text" value="10"></td></tr> <tr><td>4月</td><td><input type="text" value="94"></td><td><input type="text" value="36"></td> <td><input type="text" value="26"></td></tr> </table> <input type="button" value="グラフ表示" onclick="disp()"><p> </form> </body> </html>

 ここからは、比較的簡単な横方向のグラフにします。グラフは、win01 という別ウインドウに表示しています。面の色部分を書く関数を disp01 として分けたのですが、Netscape Navigator で元のウインドウに document.write で書き出してしまうと、そこから disp01 が認識できないようです。Internet Explorer では、他の例と同じように、元のウインドウに書くこともできます。
 この例では、1項目の幅を50ピクセルにしています。例えば、赤の1月の「売れた数量」 dat[0] が100、2月の「売れた数量」 dat[3] が150とすれば、1月から2月の間の50ピクセルで50増えているので、1月のところに100の長さの線を書いた後、長さを1ずつ増やしながら2月のところまで書きます。なお、実際には他のグラフと同様に、3色の計の最大 data が300ピクセルになるようにしていますので、長さは調整されています。赤の1ピクセル増えるごとの値の増加は dr で、i 番目に引く線は、r+dr*i に、data*300 を乗じた長さになります。青と緑についても同様に計算して、赤の右に書いています。
 2月まで書いた後は、2月と3月の間で同じように計算し、3月のところまで書いていきます。

計算式をグラフにする

 x と y の関係の計算式をグラフにします。

● サイン曲線

 交流の電圧などでなじみがある、サイン曲線です。ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function disp() { var i,start,end,wd; start=eval(document.form01.txt01.value); end=eval(document.form01.txt02.value); for(i=start;i<=end;i++) { wd=Math.ceil(Math.sin((Math.PI/180)*i)*180); if(wd>=0) { document.write("<img src='img001.gif' width='180' height='1'>"); document.write("<img src='img003.gif' width='"+wd+"' height='1'><br>"); } else { document.write("<img src='img001.gif' width='"+(180+wd)+"' height='1'>"); document.write("<img src='img003.gif' width='"+(-wd)+"' height='1'><br>"); } } document.close(); } </script> </head> <body> <form name="form01"> ■ サイン曲線を書く(面)<p> 開始角:<input type="text" name="txt01" value="0">  終了角:<input type="text" name="txt02" value="360"><p><hr> <input type="button" value="表示" onclick="disp()"><p> </form> </body> </html>

 x の値は、i で、フォームに入力した開始角(start)から終了角(end)まで増加させます。Math.sin( ) は引数をラジアンで指定しますので、i にπ/180 を乗じたものを引数として y とし、これを180倍して、表示する大きさの wd としています。wd が0以上のときは、長さ180の透明な線 img001.gif を書いてから、長さ wd の赤い線 img003.gif を書き、wd が負のときは、wd に 180を加えた長さの透明な線を書いてから、-wdの長さの赤い線を書いています。
 面でなく、線で書くこともできます。ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function disp() { var i,start,end,y; start=eval(document.form01.txt01.value); end=eval(document.form01.txt02.value); for(i=start;i<=end;i++) { y=Math.ceil(Math.sin((Math.PI/180)*i)*180)+180; document.write("<img src='img001.gif' width='"+y+"' height='1'>"); document.write("<img src='img003.gif' width='1' height='1'><br>"); } document.close(); } </script> </head> <body> <form name="form01"> ■ サイン曲線を書く(線-1)<p> 開始角:<input type="text" name="txt01" value="0">  終了角:<input type="text" name="txt02" value="360"><p><hr> <input type="button" value="表示" onclick="disp()"><p> </form> </body> </html>

 このように、単純に y の長さの透明な線を書き、その右に1ピクセルの赤い点を書くと、当然なのですが、傾きが大きい部分では、線の幅が確保できずに点線のようになってしまいます。そこで、一つ前の y からの増減に1ピクセル加えた長さの赤い線を書くように改善したのが次の例です。ここをクリックしてください。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script> function disp() { var i,start,end,y,wd; start=eval(document.form01.txt01.value); end=eval(document.form01.txt02.value); for(i=start;i<=end;i++) { y=Math.ceil(Math.sin((Math.PI/180)*i)*180); wd=Math.abs(Math.ceil(Math.sin((Math.PI/180)*(i-1))*180)-y)+1; if(y>0) { document.write("<img src='img001.gif' width='185' height='1'>"); document.write("<img src='img005.gif' width='1' height='1'>"); document.write("<img src='img001.gif' width='"+(y)+"' height='1'>"); document.write("<img src='img003.gif' width='"+wd+"' height='1'><br>"); } else { document.write("<img src='img001.gif' width='"+(185+y)+"' height='1'>"); document.write("<img src='img003.gif' width='"+wd+"' height='1'>"); if(y<-4) { document.write("<img src='img001.gif' width='"+(-y-wd)+"' height='1'>"); document.write("<img src='img005.gif' width='1' height='1'><br>"); } else document.write("<br>"); } } document.close(); } </script> </head> <body> <form name="form01"> ■ サイン曲線を書く(線-2)<p> 開始角:<input type="text" name="txt01" value="0">  終了角:<input type="text" name="txt02" value="360"><p><hr> <input type="button" value="表示" onclick="disp()"><p> </form> </body> </html>

 i のときの y の値と、i-1 のときの y の値の差に、1加えた wd の長さの赤い線を書くようにして、線が点線にならないようにしています。ついでに、y=0 のところに黒線も入れてみました。
 今回の例のサイン曲線以外でも、x と y の関係が計算式になっていれば、グラフにすることができるはずです。