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

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

デモ

デモページ

円グラフ上をマウスオーバーするとグラフと凡例がアニメーションし、
連動してツールチップが表示されます。
普通に描いたら相当に面倒そうですが、
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公式 : Raphaël—JavaScript Library
• gRaphael公式 : gRaphaël—Charting JavaScript Library

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で綺麗に作ったら喜んでもらえるかもしれませんね。