グラフィック・ライブラリ:glib2.js

更新

グラフィック・ライブラリ:glib2.js

1998.7.16 ver-1.2 小山智史(弘前大学)
2001.3.15 ver-1.3e ...NN4, NN6, IE5に対応
2004.2.23 使用例を追加
2004.3.8 河合雅司氏(富山商船高専)による改善を組み込み「glib2.js」に改称(従来版は「glib.js」, 河合雅司氏の版は「glibk.js」)
2004.10.25 ver-2.0a ...Gclose()中で空欄のデータは表示しない。Gdata()でgsymbolとgcolorが設定値を超えた場合は繰り返す
2005.11.18 ver-2.0e ...gplotの変数の最大数(NCHAIN)を20から30に変更。plot(), gplot(), line(), fline()などでドットサイズや線の太さの指定を追加。
2006.1.24 ver-2.0f ...farrow()を追加

1. 概要

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

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

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

○ 印刷時の注意

　WindowsでIE6を用いた場合の印刷操作は次のようになります。その他の場合の操作については下の表を参考にしてください。まず、表示された図(フレーム)のどこかをマウスでクリックし、フレームを選択します。次に、メニューバーの[ツール]から[インターネットオプション][詳細設定]を選びます。設定項目の[印刷]のところで[背景の色とイメージを印刷する]にチェックが入っている事を確認し、[OK]をクリックします。次にメニューバーから[ファイル][印刷]を選び、[選択されたフレームのみを印刷する]をチェックし、[OK]をクリックします。

表1. OSやブラウザとの相性
OS	ブラウザ	表示	印刷	印刷時の注意
Windows	IE6	○	○	[ツール][インターネットオプション]の詳細設定タブで「背景の色とイメージを印刷する」をチェックしておく。印刷するフレームを選択した後、[ファイル][印刷]のオプションタブで「選択されたフレームのみを印刷する」をチェックして印刷する。
	NN7.1	○	○	[ファイル][ページを設定]で「背景を印刷」をチェックしておく。印刷するフレームを選択した後、[ファイル][印刷]で「選択されたフレームのみを印刷する」をチェックして「OK」とする。
	NN4.78	○	×
MacOS8.6	IE5.1	○	○	印刷するフレームを選択した後、[ファイル][プリントプレビュー]で「背景をプリントする」「画像をプリントする」をチェックし、「プリント」ボタンをクリックして印刷する。
	NN7.02	○	○	印刷するフレームを選択した後、[ファイル][印刷]で「一般設定」を「Netscape」に変えて「The selected frame」を選び印刷する。
	NN4.7	○	×

○わかっている問題点

ブラウザにより表示速度が著しく異なります。「IE6で現在位置に表示」が最も高速で、「IEで別ウィンドウに表示」すると極端に遅くなります。NN4とNN7ではNN7の方が高速で、現在位置と別ウィンドウとの表示速度の違いはほとんどありません。
NN7.1では「グラフ表示後の表示」に問題があります。ページの末尾にグラフを置けば問題を回避できます。
プロットシンボルは単純に記号文字を使っています。従って、ブラウザや文字フォントによって表示位置が多少ずれてしまいます。また、ブラウザで表示文字のサイズを変えた場合、IEは一定のフォントサイズで表示されますが、NN4やNN7ではプロットシンボルのサイズも変化してしまいます。
(参考)用意されたデータを棒グラフで表示するのであれば、JavaScript Graph Builderがブラウザによらず安定に動作します。「背景の印刷」を有効にする必要もありません。

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.htm	このページ
	index1.htm	従来版のページ

4. 使用例

5. 関数の説明

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

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

○座標軸の指定

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,cz	1未満で拡大、1以上で縮小

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

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

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

plot(color,x,y,s) plotk(color,size,x,y,s) fplot(color,x,y,z,s) plot0(color,x,y,s) gplot(ichain,color,x,y,z,s [,linesize])
ichain	連結指示(0:連結なし,-1:初期化,1～9)
size	文字のサイズ(ポイント数)
x,y,z	座標
color	色を"RED"や"GREEN"のように文字列で指定する。
s	プロットシンボルを文字列で指定するが、plot(), fplot()で「s」を省略した場合は点のプロットとなる。また、"\|\|"は集合棒グラフ, "\|"は積み上げ棒グラフを表す特別な記号として解釈される。sを数値(1～)にするとドットサイズとなる。デフォルトは1。
linesize	連結時の線の太さ(1～)でデフォルトは1。

○線の描画

line(color,x1,y1,x2,y2 [,linesize]) fline(color,x1,y1,z1,x2,y2,z2 [,linesize])
color	色を"RED"や"GREEN"のように文字列で指定する。
x1,y1,z1,x2,y2,z2	2点の座標
linesize	線の太さ(1～)でデフォルトは1。

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

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

○矩形の描画

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	中心の座標と半径

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

glib_image(x,y,width,height,fname,name)...描画 glib_imageon(name)...再表示 glib_imageoff(name)...消去 glib_imagemove(x,y,name)...移動
x,y	画像ファイルを出力するX座標値とY座標値
width,height	画像ファイルの幅と高さ(ピクセル)
fname	画像ファイル名(gifまたはjpegファイル)
name	画像の名前

○描画開始/終了

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

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

○系列毎のラベルの指定

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ライブラリ