JavaScriptでSVGのレーダーチャートを描画するライブラリ Raphael Radar をつくった

概要

JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。

Raphael Radar は次の2つの機能を持ちます。

1. レーダーチャートをSVGで表示
2. レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択

(2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。

入手と使い方

依存ライブラリ

Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。

1. Raphael.js (1.3.1 以降)
2. jQuery (1.4.2 以降)

もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。

インストール方法

1. 上記の依存ライブラリをインストール
2. Raphael Radarのリポジトリかアーカイブをダウンロードして、raphael-radar-*.*.*.jsを Webから見えるところにアップロード

使い方

1. Raphael.js, jQury, Raphael Radar をscriptタグで読み込む（Raphael Radar はRaphael.jsより後に読み込んでください
2. scriptタグを、レーダーチャートを表示したい要素のあとに追加
3. さっきのscriptタグ内で radar 関数を呼ぶ。次のとおり:
   1. String: チャートを表示したい要素のID
   2. Integer: チャートの幅
   3. Itneger: チャートの高さ
   4. Array: チャートの各値を要素とする配列
   5. Array: チャートの要素の名前を要素とする配列
   6. Array: チャートに関連づけたいフォームのID
   7. Integer: チャートの各値の最大値。第4引数の要素は 0 からこのmax の値の範囲に収まらないとダメです

具体的な使い方は次のページをみてください: http://www.tnzk.org/devel/Raphael-Radar/example

動作環境

Raphael Radar 0.0.0は以下の環境での動作を確認しています:

• Fedora 11/Firefox 3.5.8
• Windows Vista/Firefox3.5.8
• Windows Vista/Internet Explorer8
• Mac OS X Snow Leopard/Firefox 3.6
• Mac OS X Snow Leopard/Safari 4.0.4

バグとか見つけたら

@tnzkにお知らせください。githubのBTSはみてないのでほぼ間違いなく見逃します... メールやSkypeとかその辺の手段でもいいです。お気軽にどうぞ。