一見してflash製かと見紛うくらいに美しいJavaScriptのグラフ生成ライブラリを発見したので、華麗にご紹介。

円形グラフをはじめ、縦バータイプ、折れ線グラフ、ちょっと変わったドット型グラフまでキレイに生成してくれるという魔法のようなライブラリ「gRaphaël」でございます。

Ajaxな感じのhoverアクションも搭載されていて、自動比率計算機能なんかもあって、ルックスのみならず実力も兼ね備えている模様。

そんな訳で今回のエントリーでは、カンタンキレイなJavaScriptのグラフ生成ライブラリ「gRaphaël」を、使い方の説明も兼ねてご紹介しちゃいますよー♪

グラフを超キレイに生成するjsライブラリ「gRaphaël」

実際の使い方（円形グラフの場合）

まずはhtmlのhead部分にて「raphael.js」と「g.raphael.js」、そして円形グラフ用スクリプト「g.pie.js」の3ファイルを読み込みます。

<script src="raphael.js" type="text/javascript"></script>
<script src="g.raphael.js" type="text/javascript"></script>
<script src="g.pie.js" type="text/javascript"></script>

んで次にbodyの中、グラフを表示したい部分には下記のような表記だけでOKです。

<div id="好きなID名"></div>

このdivの中にグラフが挿入されますので、このdivの中身は空のままで問題ありませんです。

ちなみに別にdivじゃなきゃダメって訳じゃないので、場合によってはpタグとかにしても良かばい。

そして最後にJavaScriptでの記述ですが、これが思った以上にカンタンです♪

<script type="text/javascript">
window.onload = function () {
	var raphP = Raphael("好きなID名");
	var pie = raphP.g.piechart(
		320, 240, 100, [42,33,15,3,7],
		{
			legend: [
				"%%.%% - ぬこ好き率",
				"%%.% - 珈琲好き率",
				"%% - WEB好き率",
				"",
				"%%.%% - 音楽好き率"
			],
			href: [
				"http://pet.benesse.ne.jp/cat/",
				"http://www.caffe-vita.com/",
				"http://www.google.com",
				"",
				"http://smkn.xsrv.jp/blog/"
			],
			legendpos: "west"
		}
	);

	pie.hover(function () {
		this.sector.stop();
		this.sector.scale(1.1, 1.1, this.cx, this.cy);
		if (this.label) {
			this.label[0].stop();
			this.label[0].scale(1.5);
			this.label[1].attr({"font-weight": 800});
		}
	}, function () {
		this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
		if (this.label) {
			this.label[0].animate({scale: 1}, 500, "bounce");
			this.label[1].attr({"font-weight": 400});
		}
	});
};
</script>

以上でビューチホーなグラフの完成です♪

次は肝心の部分、スクリプトで設定する項目の説明ですわ☆

スクリプトの解説（各種設定方法）

コレ、よく見ると分かるかと思いますが、前半23行目までがグラフ生成用のスクリプト、後半の25行目からは描画されたグラフのエフェクト用スクリプトとなっています。

まず前半のカンタンな解説ですが、05行目の数字の羅列は左から
”円形グラフ自体の横幅, 同じく縦幅, 同じく大きさ, [比率1, 比率2, 比率3, 比率4, 比率5]”
となっています。なお、比率は5つまでってゆーコトじゃなく、いくつ用意してもOKのようです。

また、比率の合計をわざわざ100にするように計算しなくても、自動的に100分率に直してくれる便利機能も標準装備してるので、例えば人口分布とかのデータの場合はそのままその数値を入れていけば良いのであります！

さらには数値の大小も自動で判断して並び替えてくれるので、ホント数値をぶっ込むだけで良いという気遣い。

そして07行目の「legend」からは、グラフ画面左部に表示される、それぞれの比率に対するパーセンテージ表記とコメントに関する設定です。

”%%.%%”と書くと、小数点以下２ケタまで表示してくれます。”%%.%”なら小数点以下１ケタまで、”%%”だけなら小数点以下は非表示になります。

ここでの注意点としては、先ほど05行目で記入した比率の順に設定していく、というトコロですかね。

もし比率4だけは％表示もコメントも記入したくないって場合は、ただ””とだけ書けば、空白として処理してくれます。

さて、14行目の「href」からは、字の如く各比率部分からのリンクを設定できます。

こちらも要らない部分があったら、そこは空白にすれば良いです。

で、21行目の「legendpos」ですが、これは「各項目のパーセント表示＆コメント」を表示させる場所の設定です。

デフォルトでは左部にありますが、例えば上に持って来たいなら”west”の部分を”north”にしてください。

25行目以降のエフェクト設定部分ですが、ここは特にいじる必要なさそうな感じです。

マウスオーバーでグラフがウニっと広がって、それに連動して該当するlegend部分の文字が太くなる、ってエフェクトですね。

ここに来て残念なお知らせ

こんなに素晴らしく美しく便利で手軽な「gRaphaël」ですが、いつものコトというか何というか、IEで挙動がおかしいです。。。

そもそもグラフの配置位置設定が絶対指定になってるようで、IEちゃんはそーゆーの分からないタイプなので表示されなかったりします。

まぁFirefoxとかならイケるので、個人用サイトとかでなら使えるかも。。。