グラフィック・ライブラリ:glib

グラフィック・ライブラリ:glib

1998.7.16 ver-1.2 小山智史(弘前大学)
2001.3.15 ver-1.3e ...NN4, NN6, IE5に対応
2004.1.19 河合雅司氏(富山商船高専)による改善(glibk.js)
2004.2.23 使用例を追加

1. 概要

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

　本ソフトは一部弘前大学総合情報処理センター研究開発費の補助を得て開発しました。

　本ソフトはフリーソフトです。再配布も改造も自由です。改造したソフトの配布は、そのことを明記して自由に行ってください。作者への連絡は不要です。でも、お気付きの点や改良された点を、作者にご連絡いただけるとうれしいです。

○わかっている問題点

(1) ブラウザにより表示速度が著しく異なります。「IE5で現在位置に表示」が最も高速で、「IEで別ウィンドウに表示」すると極端に遅くなります。NN4とNN6ではNN6の方が高速で、現在位置と別ウィンドウとの表示速度の違いはほとんどありません。
(2) 背景色でグラフを描いていますので、印刷する場合は「背景の印刷」を有効にしてください。具体的な設定方法は次のとおりです。IEでは[ツール][インターネットオプション]の[詳細設定]タブで「背景の色とイメージを印刷する」を有効にします。NNでは[ファイル][ページ設定]の「背景を印刷」を有効にします。
(3)NN6.0では「グラフ表示後の表示」に問題があります。ページの末尾にグラフを置けば問題を回避できます。
(4)プロットシンボルは単純に記号文字を使っています。従って、ブラウザや文字フォントによって表示位置が多少ずれてしまいます。
(参考)用意されたデータを棒グラフで表示するのであれば、JavaScript Graph Builderがブラウザによらず安定に動作します。「背景の印刷」を有効にする必要もありません。

2. サンプル

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

ソース: <script src=glib.js></script> <script> gopen("lightcyan",400,400,"グラフの例",0); //背景色:lightcyan, サイズ:400×400, タイトル:グラフの例, 表示方法:0(現在位置) 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=glib.js></script> <script> Gopen("lightcyan",550,300,"実践センター利用状況",0); xyinit(30,250,1,0,0,0); goffset(1992,0,0); gscale(2,1000,1); xscale("BLACK",2000,"年",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); Gclose(); </script> 表示結果: 上図は11行目でプロットシンボルを「||」として「集合棒グラフ」を指定していますが、 Gsymbol("|","|","|","|"); とすると下図の「積み上げ棒グラフ」となります。 また、この行を削除するとデフォルトで Gsymbol("×","●","▲","■","◆","＊","○","△","□","◇") が仮定され、下図となります。

3. ファイルの構成

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

4. 使用例

5. 関数の説明

○描画開始/終了

gopen(bgcolor,ixmax,iymax,s,frameno)
gclose()

bgcolor 窓の背景色
ixmax 窓の幅
iymax 窓の高さ
s グラフタイトル
frameno -1:別ウィンドウに表示, 0:現在位置に表示, 1〜:表示フレームを指定

○座標軸の指定

xyinit(x0,y0,dd,kx,ky,kz)

x0,y0 基準点(画面左上(0,0)
dd X/Y正方向(0,1:X右Y上,2:X左Y上,3:X左Y下,4:X右Y下)
kx,ky,kz軸傾斜指定(kx,kyはz軸を中心に回転。
　kzはy軸中心(-6〜6)またはx軸中心(-16〜16)に回転。)
　0:標準,1:15゜,2:30゜,3:45゜,4:60゜,5:75゜,6:90゜
　-1:-15゜,-2:-30゜,-3:-45゜,-4:-60゜,-5:-75゜,-6:-90゜

○オフセットの指定

goffset(x,y,z)

x,y,z基準点のオフセット値

○軸感度の指定

gscale(cx,cy,cz)

cx,cy,cz1未満で拡大、1以上で縮小

○座標軸の表示

xscale(color,fs,s,step)
yscale(color,fs,s,step)
zscale(color,fs,s,step)

color色を"RED"や"GREEN"のように文字列で指定する。
fsフルスケール値
s軸名文字列
step目盛のステップ値...省略すると「自動」となる。

○点やシンボルのプロット

plot(color,x,y,s)
fplot(color,x,y,z,s)
plot0(color,x,y,s)
gplot(ichain,color,x,y,z,s)

ichain連結指示(0:連結なし,-1:初期化,1〜9)
x,y,z座標
color色を"RED"や"GREEN"のように文字列で指定する。
sプロットシンボルを文字列で指定するが、plot(), fplot()で「s」を省略した場合は点のプロットとなる。また、"||"は集合棒グラフ, "|"は積み上げ棒グラフを表す特別な記号として解釈される。

○線の描画

line(color,x1,y1,x2,y2)
fline(color,x1,y1,z1,x2,y2,z2)

color色を"RED"や"GREEN"のように文字列で指定する。
x1,y1,z1,x2,y2,z22点の座標

○矢印の描画: (x1,y1)から(x2,y2)への矢印

arrow(color,x1,y1,x2,y2)

color色を"RED"や"GREEN"のように文字列で指定する。
x1,y1,x2,y22点の座標

○矩形の描画

gbox(color,x1,y1,x2,y2)
fbox(color,x1,y1,z1,x2,y2,z2)

color色を"RED"や"GREEN"のように文字列で指定する。
x1,y1,z1,x2,y2,z2対角の2点の座標

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

circle(color,x,y,r)
fcircle(color,x,y,z,r)

color色を"RED"や"GREEN"のように文字列で指定する。
x,y,z,r中心の座標と半径

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

ellipse(color,x,y,rx,ry)
fellipse(color,x,y,z,rx,ry)

color色を"RED"や"GREEN"のように文字列で指定する。
x,y,z,rx,ry中心の座標と半径

○描画開始/終了

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

Gopen(bgcolor,ixmax,iymax,s,frameno)
Gclose()

bgcolor 窓の背景色
ixmax 窓の幅
iymax 窓の高さ
s グラフタイトル
frameno -1:別ウィンドウに表示, 0:現在位置に表示, 1〜:表示フレームを指定

○系列毎のラベルの指定

Glabel(label1, label2, ...)

label1, label2, ... 系列1, 2, ...のラベル

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

Gsymbol(s1, s2, ...)

s1, s2, ... 系列1, 2, ...のプロットシンボル

○プロットデータの追加

Gdata(x, y1, y2, ...)

x xの値
y1, y2, ... 系列1, 系列2, ...の値
MMIライブラリ
　　　koyama@cc.hirosaki-u.ac.jp