1998.7.16-

グラフィック・ライブラリ: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()を追加
2014.2.13 glib5.js(新版)[XP/IE8版はこちら]

1. 概要

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

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

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

○ 印刷時の注意

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

○わかっている問題点

  1. ブラウザにより表示速度が著しく異なります。「IE6で現在位置に表示」が最も高速で、「IEで別ウィンドウに表示」すると極端に遅くなります。NN4とNN7ではNN7の方が高速で、現在位置と別ウィンドウとの表示速度の違いはほとんどありません。
  2. NN7.1では「グラフ表示後の表示」に問題があります。ページの末尾にグラフを置けば問題を回避できます。
  3. プロットシンボルは単純に記号文字を使っています。従って、ブラウザや文字フォントによって表示位置が多少ずれてしまいます。また、ブラウザで表示文字のサイズを変えた場合、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」からできるように変更したので注意してください。)

○座標軸の指定

○オフセットの指定

○軸感度の指定

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

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

○線の描画

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

○矩形の描画

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

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

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

○描画開始/終了

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

○系列毎のラベルの指定

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

○プロットデータの追加


MMIライブラリ