レーダーチャートって？

おそらく、普通の生活をしていたら"レーダーチャート"なんて言葉は聞かないと思います。
でも、下記のようなグラフは見たことあるのではないでしょうか。

タイトルサンプル

きっと、男の子だったら某サッカーゲームでたくさん見ているんじゃないでしょうか。
久しぶりにゲームしたいなぁ。。

どうやるの？

ずばり、以下を貼り付けたら完成です。

<img src="http://chart.apis.google.com/chart?cht=r
&chxt=x,y
&chds=0,5
&chco=00AEEF
&chd=t:4,1,3,5,5,4
&chls=5
&chm=o,00AEEF,0,-1,12,0|o,FFFFFF,0,-1,8,0
&chxl=1:|0|1|2|3|4|5|0:|これは|実は|画像|扱い|です。
&chts=000000,20
&chtt=レーダーチャートサンプル
&chs=400x400" alt="タイトルサンプル" />

画面がロードされたタイミングで、Googleさんのところに情報を取得しにいく作りになっています。
Googleさんが無料で公開しているAPIで、少し癖がありますが結構使えます。

いじりやすいパラメータを説明します。
細かくは、いろんなサイトで説明もありますし、公式でも確認できるので割愛します。
※そもそもここで利用していないパラメータもいくつかあります。

No	Parameter	Explanation
1	cht=r	作成するチャートの種類
2	chds=0,5	メモリのMAX,MIN
3	chco=00AEEF	データの色
4	chd=t:4,1,3,5,5,4	各データの値
5	chls=5	線の太さ
6	chm=o,00AEEF,0,-1,12,0\|o,FFFFFF,0,-1,8,0	マーカーの設定
7	chxl=1:\|0\|1\|2\|3\|4\|5\|0:\|これは\|実は\|画像\|扱い\|です。	軸の表示文字
8	chts=000000,20	タイトル色とサイズ
9	chtt=レーダーチャートサンプル	グラフタイトル
10	chs=400x400	グラフサイズ

No4とNo7が曲者なんです。
グラフ表示を一周させるために、最初の値と同じ値を最後にも設定しないといけません。
はい、なにを言っているのかわからないですよね。

chd=t:4,1,3,5,5,4 // 4から始まって4で終わっている

グラフは五角形なのに、データとして設定している値は6つありますよね。
ここが曲者です。
4から始まったのなら、最後におまけとして同じく4を書き加えてあげないと、グラフが"つながらない"んです。

なんか、めっちゃシステム側の都合っぽく感じられて、一般に公開するAPIとしては不出来と言わざるを得ません。

天下のGoogle様なので、止むない事情や、私の気付いていない利点があるのかもしれませんが。。

さいごに

当ブログでも何度かこのレーダーチャートを利用していますが、正直使いづらいです。
ただ、さすがGoogleさんだけあって、非常にキャッチーに作られていると思います。
ちょっとパラメーターの数が多すぎでは？と感じますが、肝心な部分の操作だけであればパパッと作れてしまいます。
コード量としてはとても少ないですしね。

これは、APIとしてとても良く機能している証拠です。

最近はあまりWeb界隈で流行っている感じはしないですが、サラッと使うにはもってこいのAPIです。
興味が湧いた方はぜひ使ってみてください。