there is a time for everything

現役SIerが技術や育児情報を紹介するブログです。

GoogleAPI レーダーチャートを書いてみた

レーダーチャートって?

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

タイトルサンプル

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

どうやるの?

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

<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です。
興味が湧いた方はぜひ使ってみてください。