便利なんだけど意外に情報がない。
Google Chart APIのレーダーチャートの詳細設定方法です。
そもそもGoogle Chartってなに？という方は、こちらを見てみてください。
Google Chart
基本英語のみですが、簡単に言えば「数値を入れると勝手にグラフにしてくれる」APIです。
グラフの形も様々なので、色々試してみると面白いと思います。
それはさておき、今回はWordPressのカスタムフィールドの値をそのままレーダーチャートの数値に置き換えて使用するため、できるだけソースを簡単に、且つ見やすくしたいと思ったのですが、、、
これが以外と面倒な書き方ばかりで、できるだけわかりやすく自分でまとめてみました。
WordPressのカスタムフィールドの値をレーダーチャートに読み込むサンプル
<img src="http://chart.apis.google.com/chart?cht=r
&chxt=x,y
&chds=0,5
&chco=FF0000
&chd=t:
<?php echo get_post_meta($post->ID,"A値",true); ?>,
<?php echo get_post_meta($post->ID,"B値",true); ?>,
<?php echo get_post_meta($post->ID,"C値",true); ?>,
<?php echo get_post_meta($post->ID,"D値",true); ?>,
<?php echo get_post_meta($post->ID,"E値",true); ?>,
<?php echo get_post_meta($post->ID,"A値",true); ?>
&chls=2
&chm=B,FF000020,0,0,0
&chxl=1:|0|1|2|3|4|5|0:|A|B|C|D|E
&chs=200x200" alt="Sample" />
上の図とソースが今回作成したものです。
カスタムフィールドに設定した「A値,B値,C値,D値,E値」をそのままグラフの数値として設定してあります。
A値が最後にも書かれているのは、レーダーチャートの場合一周して最後にEからAの地点まで線を引っ張らないといけない為です。
この最後のA値がないと、Eの部分までで最後にAに線がつながってくれません。
同じ様なものは一杯あるのですが、この中身をカスタマイズしようとして検索していると結構面倒だったので、今回設定した部分を全て書き出してみました。
基本設定詳細
<img src="http://chart.apis.google.com/chart?cht=r ←レーダーチャートを指定する設定
&chxt=x,y ←軸の設定
&chds=0,5 ←x軸の最小値,最大値
&chco=FF0000 ←数値線の色
&chd=t:5,1,2,3,4,5 ←グラフ数値（カスタムフィールドにする所）
&chls=2 ←数値線の太さ
&chm=B,FF000020,0,0,0 ←B（固定でOK）,数値線の背景色 続けて濃度の%,（0,0,0）は範囲設定
最初の数値のデータから2つ目のデータまでを塗りつぶす等（レーダーでは0のまま）
&chxl=1:|0|1|2|3|4|5|0:|A|B|C|D|E ←1:はy軸の表記 続けて0:がx軸の表記
&chs=200x200" alt="Sample" /> ←画像のalt設定
以上をふまえ、具体的に変えてみた例です。
見比べていただければどこを変えているかわかると思います。
<img src="http://chart.apis.google.com/chart?cht=r
&chxt=x,y
&chds=0,30
&chco=000000
&chd=t:10,15,23,18,10,28,6,10
&chls=5
&chm=B,00000050,0,0,0
&chxl=1:|0|10|20|30|0:|あ|い|う|え|お|か|き
&chs=200x200" alt="Sample" />
他にも細かな設定もあるのですが、XやYの値を変更する事が一番多いと思うので、まずはこれで対応出来るんじゃないでしょうか。
他にもカスタマイズ要望がでたら試してみようと思います。
