1998.7.16-

グラフィック・ライブラリ:glib5.js(glib2はこちら)

(更新履歴)

1. 概要

 JavaScriptのグラフィックライブラリです。典型的な利用例はサンプルをご覧ください。

(印刷時の注意)

 印刷時は「背景色の印刷」を有効にしてください。

2. サンプル

2.1 データを計算しながら表示する例

ソース:

<script src=glib5.js></script> <script> G=new Graph("lightcyan",400,400,"グラフの例"); //背景色:lightcyan, サイズ:400×400, タイトル:グラフの例 G.xyinit(200,200,0,0,0,0); //基準点は(x,y)=(200,200) G.goffset(0,0,0); //基準のオフセットは(x,y,z)=(0,0,0) G.gscale(1,1,1); //各軸の感度は(x,y,z)=(1,1,1) G.xscale("BLACK",1,"x"); G.xscale("BLACK",-1,""); //X軸表示 G.yscale("BLACK",1,"y"); G.yscale("BLACK",-1,""); //Y軸表示 G.gplot(-1); //gplot()の初期化 for(x=-1.1;x<=1.1;x+=0.1){ //x:-1.1~1.1を0.1きざみ G.gplot(1,"RED", x,x, 0,"×");//データ系列1:(x,y)=(x,x) G.gplot(2,"BLUE", x,x*x, 0,"○");//データ系列2:(x,y)=(x,x*x) G.gplot(3,"GREEN",x,x*x*x,0,"△");//データ系列3:(x,y)=(x,x*x*x) } </script>

表示結果:

2.2 用意されたデータを表示する例

ソース:

<script src=glib5.js></script> <script> var H=new Graph("#e0ffe0",680,360,"実践センター利用状況"); H.xyinit(30,300,0,0,0,0); H.goffset(1992,0,0); H.gscale(2.5,1000,1); H.xscale("BLACK",2004,"年",1); H.yscale("BLACK",2000,"利用数",500); H.xygrid("BLUE"); H.Glabel("自主学習室","教材作成室","施設利用","貸し出し"); H.Gsymbol("||","||","||","||"); H.Gdata(1992,184,82,27,46); H.Gdata(1993,384,314,41,76); H.Gdata(1994,509,278,69,68); H.Gdata(1995,260,358,110,180); H.Gdata(1996,194,379,118,163); H.Gdata(1997,183,307,125,129); H.Gdata(1998,193,423,150,109); H.Gdata(1999,1794,324,186,80); H.Gdata(2000,1159,284,203,95); H.Gdata(2001,1095,238,237,138); H.Gdata(2002,1009,214,237,138); H.Gdata(2003,847,205,188,278); H.Gdraw(); </script>

表示結果:

上図は11行目でプロットシンボルを「||」として「集合棒グラフ」を指定していますが、

Gsymbol("|","|","|","|"); とすると下図の「積み上げ棒グラフ」となります。

表示結果:

また、この行を削除するとデフォルトで

Gsymbol("×","●","▲","■","◆","*","○","△","□","◇") が仮定され、下図となります。

表示結果:

3. ファイルの構成

	glib5.js		グラフィックライブラリ...ブラウザで表示してglib5.jsで保存してください。
	index5.html	このページ

4. 使用例

5. 関数の説明(以下 Gobjは名前の例)

○描画オブジェクトの生成

○座標軸の指定

○オフセットの指定

○軸感度の指定

○座標軸の表示

○線の描画

○矩形の描画

○円の描画(Circle(), fCircle()は円内塗り潰し)

○楕円の描画(Ellipse(), fEllipse()は楕円内塗り潰し)

○描画開始/終了

予め用意されたデータのグラフを描く場合は、下記のGlabel, Gsymbol, Gdataでデータを記述後にGdraw()で描画

○系列毎のラベルの指定

○系列毎のプロットシンボルの指定

○プロットデータの追加


koyama88@cameo.plala.or.jp