Chartを使ってみた。 - うなの日記

Yahoo! UI Library 2.4.0 の新機能「Chart」を使ってみました。

「Chart」を使うとJavaScript APIの呼び出しだけで簡単にチャートを作成できます。
チャートはFlash(CSSやJavaScriptではなく)を使って描画されます。
- 内部的には、ASTRAが使われているようです。前にさわったことがあるな。
- Flashとの連携部分は隠蔽されており、基本的にJavaScriptの知識のみあればリッチなチャートを使えます。
JavaScriptからのリアルタイムなデータ更新もサポートされます。(この辺が、画像を返す系のグラフ作成APIに対するメリットかな。)

インストール

必要なモジュールをインポートします。

<!-- 依存モジュール -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/json/json-beta-min.js"></script>
<!-- ソース -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/charts/charts-experimental-min.js"></script>

また、これに加えswfのライブラリも必要です。

Yahoo! UI Libraryをダウンロードして使用する場合は「assets」以下に入っており、デフォルトではそちらを参照する設定になっています。
Yahoo! UI Libraryのサイトから直接ロードして使う場合はJavaScriptで以下の設定を行う必要があります。

// サーバーからchart.swfを読ませるための設定
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";

チャートを描く

JavaScriptのデータを元に、簡単な棒グラフを描いてみます。基本的な手順は次の通りです。

元データとなるデータを用意する。
- 今回はJavaScriptの配列を使います。
データソースを作る。
- 元データからYAHOO.util.DataSourceを作成します。
チャートを作る。
- 引数でチャートの描画先、データソース、およびオプションを指定してチャートを作成します。

サンプルです。

// サーバーからchart.swfを読ませるための設定
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";

// グラフのデータ
var kittens = [
  { name: "mii",   age: 1 },
  { name: "tora",  age: 2 },
  { name: "shiro", age: 4 },
  { name: "kuro",  age: 2 }
];

// データソース
var dataSource = new YAHOO.util.DataSource( kittens );
dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; // JSの配列
dataSource.responseSchema = {
  fields: [ "name",　"age" ] // 名前と年齢のカラムを持つ。
};

// チャートを書く。
// 引数でグラフを格納する要素、データソース、どの値をどの軸として使うか等の指定を渡す。
var chart = new YAHOO.widget.ColumnChart( "chart", dataSource,{
    xField: "name",
    yField: "age"
});

実行結果はこちらから

チャートのリアルタイム更新

元データの更新に追従して、チャートを更新する機能が用意されています。使い方は次の通り。

チャートを生成する際に、「polling」オプションを指定し、定期的にデータの変更の監視と再描画を行う設定をする。
データを更新する。
- →次回の更新チェック時にデータが変更されていればグラフが再描画されます。

サンプル。

... 省略

// チャートを書く。
var chart = new YAHOO.widget.ColumnChart( "chart", dataSource,{
    xField: "name",
    yField: "age",
    polling: 1000 // 1秒ごとに再描画する設定
});

//5秒ごとに年を重ねる。
setInterval( function(){
  kittens[0]["age"] += 1;
}, 5000 );

実行結果はこちらから