WT-Toolkit で遊んでみた - アダプチブな日々

本業(学生)が忙しくて気がつけばかなりのスパンが開いてしまいました。学会発表も一段落したのでまたぼちぼちと書いていってみたいと思います。

WT-Toolkit ってなに？

WT-Toolkit は、JavaScript を利用したグラフィックライブラリです。棒グラフ(BarChart)、円グラフ(PieChart)、線グラフ(LineChart) などの基本的な統計グラフが用意されていて、ちょっとした可視化にはもってこいのライブラリです。

便利そうだけど、サンプルがあまり見当たらない

インストールをしてみたものの、ディレクトリにはサンプルが収録されていません。公式サイトの Live Demo には、かなりナウいグラフ描画のデモがあるのですが、ソースコードが圧縮されているため、まともに読むことはできません。(読めるけど変数名が _69 とかになってる)

Googleで検索しても中々サンプルがなかったので、備忘録がてら、簡単なチュートリアルを書いていこうと思います。

導入

まずは、公式サイトから WT-Toolkit パッケージをダウンロードします。

公式サイト： http://wt-toolkit.sourceforge.net/

ページの [Downloads] からいけます。

ダウンロードが完了したら、適当なところに展開します。展開したディレクトリを見てみると、中に色々あると思いますが、重要なのは

doc ・・・ API ドキュメント
js ・・・ライブラリ本体

の2点です。

基本的に、WT-Toolkit を使う場合は、適当な箇所にjs ディレクトリを用意するといいみたいです。

棒グラフを表示してみる new wtBarChart

では、WT-Toolkit を使って棒グラフを表示したいと思います。

作業環境の準備

まず、作業用のディレクトリを作り、そこに、js ディレクトリをまるごとコピーします。そして、描画用のテストHTMLを作ります。以下の例では、作業用のディレクトリを work としています。

work ┬ js             ・・・ ライブラリが格納されたディレクトリ
     └ barChart.html  ・・・ これに描画用のスクリプトなんかを書いていきます。

HTMLの雛形の作成とWT-Toolkit の読込

とりあえず、最低限度のHTMLだけは書きましょう。今回は、描画用のスクリプトをHTML内部に書くので、HEADタグとかは忘れずに。雛形ができたら、WT-Toolkit のライブラリを読み込むようにします。読み込むファイルは、js/wt_core.js だけでいいです。

WT-Toolkit の読込

語尾の ?tx=ab については、良く分かりません。今日はじめたものですので。(^^;
これで雛形とライブラリの読込が完了しました。

グラフ描画領域の作成

次に、body タグ内に、グラフを表示するための領域を確保します。DIVタグで描画領域を確保します。

描画用の領域を確保

<div id="barChart" width="500px" height="500px"></div>

上記の例では、縦 500px、横 500px を確保しています。

id要素を含めて忘れずに指定してください。

描画用関数の用意

グラフを表示するための領域も確保できたので、いよいよ、描画のためのスクリプトを書いていきます。まず、棒グラフの作成を行うためのメソッドを用意します。そして、この関数を、ページ読込時に呼出されるようにします。

onLoad に呼出すのは、表示用の領域が読み込まれる前に挿入しようとしてエラーになるのを防ぐためです。

そして、rendarBarChart() 内に棒グラフを作成する処理を書いていきます。

グラフ作成の前に・・・

グラフ作成の前に、WT-Toolkit の棒グラフ用のライブラリを見てみましょう。棒グラフは wtBarChartというクラスで定義されています。詳しくは、API ドキュメントを読んでください。

今回は作成する上で最低限必要な、

コンストラクタ
データの追加

だけ説明します。

まず、コンストラクタは以下のようになっています。

 wtBarChart( _parent, _x, _y, _type, _width, _height, _depth, _angle, _xMin, _xMax, _yMin, _yMax)

表に整理してみます。

引数	型	意味
_parent	wtCanvas クラスか wtVectorGroup	グラフを描画するためのオブジェクト
_x	数値	基準X座標？ 0 が無難
_y	数値	基準Y座標？ 0 が無難
_type	文字列	グラフの向き "vertical" か "horizontal" を指定
_width	数値	グラフの幅
_height	数値	グラフの高さ
_depth	数値	グラフの奥行き
_angle	数値	歪み 45度くらいがベスト
_xMin	数値	X軸の最小値
_xMax	数値	X軸の最大値
_yMin	数値	Y軸の最小値
_yMax	数値	Y軸の最大値

棒グラフを作成したい場合は、このコンストラクタを呼べば空の棒グラフが作成されます。

wtCanvas と wtVectorGroup

コンストラクタの引数のほとんどは数値と文字列ですが、1つだけそうじゃないのがあります。それは_parent です。この引数にはそれぞれ、wtCanvasクラスのインスタンスか、wtVectorGroupのインスタンスを与えてやります。今回は、wtCanvasクラスのインスタンスを与えることにします。

まず、wtCanvas のコンストラクタを呼出します。wtCanvas のコンストラクタは、以下の引数をとります。

wtCanvas( parentWidget, width, height)

引数	型	意味
parentWidget	wtWidget クラスか DOM_Node クラス	canvasを埋め込む要素 Element
width	数値	canvas (描画領域)の幅
height	数値	canvas の高さ

以下が呼出し例になります。

  var element = document.getElemenyById('canvas');  //  id 属性が canvas の要素を得る
  var canvas = new wtCanvas(element, 500, 500);     //  500 × 500 のcanvas領域を確保

上記の例では、だいぶ前に定義した id が "canvas" の DIV タグを指定しています。
この canvas を wtBarChart のコンストラクタに与えてやればよいのです。

棒グラフの作成とデータの追加

前置きがながくなりましたが、これで終わりです。
先ほど作成した wtCanvas オブジェクトを引数に、棒グラフを作成します。

  var barChart = new wtBarChart(canvas, 0, 0, "vertical", 300, 300, 1, 45, 0,100, 0, 100);

これで空の棒グラフが作成されました。後は、このグラフに表示したいデータを追加してやれば言いだけです。

データの追加には、addBar メソッドを使います。面倒なので使い方だけ。

barChart.addBar(50);  // 値が50のデータを追加

データを配列で用意している場合はこんな感じですね。

var data = [10, 20, 30, 40, 50];

for ( var i = 0; i < data.length; i++ ) {
  barChart.addBar(data[i]);
}

完成！！

すると、こんな素敵なグラフが表示されます。(この例ではFirefoxのみ)

IE でもグラフを表示したい場合は、もう少し工夫がいります。
それについては次回にでも。(^^;