Mach3.laBlog

実験室: gRaphaëlでインタラクティブなグラフを描いてみる

この記事は賞味期限切れです。(更新から1年が経過しています)

Raphaëlは、Webページでベクターグラフィックを簡単に扱う為のJavaScriptライブラリです。
それを拡張する為の、gRaphaëlというグラフ描画プラグインが公開されています。
今回はgRaphaëlを使ってインタラクティブなグラフを描いてみました。
(以下、Raphaelと表記します)

gRaphaël

デモ

デモページへ

デモページ

円グラフ上をマウスオーバーするとグラフと凡例がアニメーションし、
連動してツールチップが表示されます。
普通に描いたら相当に面倒そうですが、
Raphaelのお陰でかなり短いスクリプトで済んでいます。素晴らしい!

デモのソースを見て頂くのが一番手っ取り早いですが、
要点だけ簡単に掻い摘んでみます。

ライブラリのロード

<script type="text/javascript" src="raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="g.raphael.js" charset="utf-8"></script>
<script type="text/javascript" src="g.pie.js" charset="utf-8"></script>

使用するライブラリは、まずはraphael.js本体。
それからグラフ描画プラグインの、g.raphael.jsと、
描きたいグラフのJSファイル(この場合は円グラフ用のg.pie.js)を読み込みます。
それぞれ、公式からダウンロードします。

Raphaelオブジェクトを生成する

var r = Raphael("holder",640,480);

Raphaelを使用するにあたって必ず必要になる処理です。
第一引数の”holder”は、描画されるベクターオブジェクトを格納するエレメントのIDを入れましょう。
第二・第三引数はお察しの通り、width/heightです。
勿論、格納する為のエレメントは先に用意されている必要があります。

<div id="holder"></div>

Raphaelオブジェクトに円グラフを追加する

var pie = r.g.piechart( 320, 240, 150, values, { legend:legends });

第一・第二引数は中心点の座標、第三引数は半径です。
valuesにはグラフの元になる値を配列にして渡します。
legendsには凡例に使うテキストを、これまた配列にして渡してあげましょう。

マウスオーバー/アウト時のエフェクトを追加する

pie.hover( function(){
    // マウスオーバー時のエフェクト
}, function(){
    // マウスアウト時のエフェクト
} );

第一・第二引数は共にfunctionを受け取り、それぞれがマウスオーバー時/アウト時に呼ばれます。

尚、gRaphaelについては2010年7月13日現在、ドキュメントがまだ整備されていません。
ですので、実際にどのように書けば良いのかは公式のデモのソースを読んで
使ってみたい効果を拾って試行錯誤するしかありません。
「遅くなってごめんね!がんばってるからね!」と書いてあるので期待しましょう。

書き方次第で様々な効果が得られそうなので、なかなか面白いライブラリです。
統計画面等をgRaphaelで綺麗に作ったら喜んでもらえるかもしれませんね。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*