1998.7.16-

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

(更新履歴)

1. 概要

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

 本ソフトはフリーソフトです。改造したソフトの配布は、そのことを明記して自由に行ってください。

(印刷時の注意)

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

2. サンプル

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

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

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

ソース: <script src=glib2.js></script> <script> Gopen("lightcyan",640,300,"実践センター利用状況",-2); xyinit(30,250,1,0,0,0); goffset(1992,0,0); gscale(2.5,1000,1); xscale("BLACK",2004,"年",1); yscale("BLACK",2000,"利用数",500); xygrid("BLUE"); Glabel("自主学習室","教材作成室","施設利用","貸し出し"); Gsymbol("||","||","||","||"); Gdata(1992,184,82,27,46); Gdata(1993,384,314,41,76); Gdata(1994,509,278,69,68); Gdata(1995,260,358,110,180); Gdata(1996,194,379,118,163);Gdata(1997,183,307,125,129); Gdata(1998,193,423,150,109);Gdata(1999,1794,324,186,80); Gdata(2000,1159,284,203,95);Gdata(2001,1095,238,237,138); Gdata(2002,1009,214,237,138);Gdata(2003,847,205,188,278); Gclose(); </script> 表示結果: 上図は11行目でプロットシンボルを「||」として「集合棒グラフ」を指定していますが、 Gsymbol("|","|","|","|"); とすると下図の「積み上げ棒グラフ」となります。 また、この行を削除するとデフォルトで Gsymbol("×","●","▲","■","◆","*","○","△","□","◇") が仮定され、下図となります。

3. ファイルの構成

	glib2.js		グラフィックライブラリ...ブラウザで表示してglib2.jsで保存してください。
	index.html	このページ
	index1.html	従来版のページ

4. 使用例

5. 関数の説明

○描画開始/終了(* glib2から現在位置への表示を「-2」に変更し、フレームの指定を「0」からできるように変更したので注意してください。)

○座標軸の指定

○オフセットの指定

○軸感度の指定

○座標軸の表示(* 河合雅司氏の指摘により、目盛が正常に表示されない問題を修正しました。)

○点やシンボルのプロット(* plotkは河合雅司氏による拡張)

○線の描画

○矢印の描画: (x1,y1)から(x2,y2)への矢印(* 任意方向への矢印表示は河合雅司氏による拡張)

○矩形の描画

○円の描画(Circle(), fCircle()とすると円内塗り潰し)

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

○画像(GIF又はJPEGファイル)の描画/再表示/消去/移動(* 河合雅司氏による拡張)

○描画開始/終了

予め用意されたデータのグラフを描く場合は、下記のGopen, Gclose, Glabel, Gsymbo, Gdataを利用することにより、記述を多少簡略化できます。

○系列毎のラベルの指定

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

○プロットデータの追加


koyama88@cameo.plala.or.jp