比較やレビューサイトなんかをWordpressで作ろうと思うとレーダーチャート使いたくなりません？
わざわざ別でレーダーチャートのイメージを作って貼り付けると大変なので、各項目ごとに１から5をプルダウンで選択して、自動的にレーダーチャートが作って幸せになろうということです。
やり方を簡単にいうと、Google Chartにカスタムフィールドの値を渡して、Google Chartを動的に表示させます。
プログラム組むのが面倒で、お手軽に見た目がきれいな図が欲しい人におすすめです。
こんなグラフが簡単に掲載できます。
Google Chartでテンプレートを作る
まずは、Google Chartで好みのレーダーチャートを作成します。
グラフ作成ウィザードが激便利！
ということで、ウィザードを使って作っていきます。
１．チャートウィザードにアクセスして、レーダーチャートを選択
２．するとこんな画面になるので、適当にパラメータをいじる
これだとあんまりなので、いじったところを説明すると、
Title
タイトルです。Textにグラフのタイトルをいれましょう。フォントの色とサイズも変更できます。
Size
表示されるグラフのサイズです。デフォルトは300×300
今回は変更なし
Date
データの要素を入力していきます。ココを設定する前に、先にAxesを設定しましょう。
ここで1点注意する必要があります。
軸の数が5であれば、データは6必要になります。
例えば、”10” ”8” ”2” ”7” ”5” のように5つしか記載しないとこんな感じになります。
“10″ “8″ “2″ “7″ “5″ “10″のように必ず先頭と最後は同じ値を入れて、軸の数＋1つのデータを記載する必要があります。
DateStyle
データの線の色と太さを変更できます。
線で囲まれた内側の色は、ここではなく、MakersのFill Maker Colorで選択します。
今回は変更なし
Axes
軸の数、軸の範囲、軸の名称（ラベル）を決定します。
デフォルトでは、1月～12月が入っているので適当に削除してください。
RageのStartとEndで、グラフの表示範囲を設定します。
10段階評価の場合ではStartに0、Endに10を入力します。
Labelsには、Textsにラベル名を入力していきます。
Axis Style
Axis1（Bottom（X））・・・各ラベルのフォントサイズや色を変更できます。
Axis2（Left（Y））・・・評価尺度の座標のフォントサイズや色を変更できます。また、Endの値を変更することによって、表の座標範囲を設定できます。
例えば、Dateでmax10設定し、こちらのAxisStyleのAxis2のEndを5に設定すると、0.5や1.5なども入れた、0～5で10段階評価のグラフを作成することができます。
Makers
グラフの塗りつぶしの有無や色を選択することができます。
今回は変更なし
Fills
グラフの背景や透明度などを変更することができます。
今回は変更なし
Margin
グラフのマージンです。
今回は変更なし
Grid
作成するグラフに補助線を入れることができます。
折れ線グラフなどで利用すると便利化と思いますが、今回のレーダーチャートでは必要ありません。
これでテンプレートができました。
右下の黄色のエリアのURLをコピーしておきます。
WordPressに埋め込む
１．カスタムフィールドの設定
カスタムフィールドを軸ごとに作成します。
数字でプルダウンで作ると入力しやすいかと思います。
1 2 3 4 | [namakemono] type = select label = なまけもの度（値が大きいほど怠け者） value = 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 |
2.単一記事の投稿に設定
コピペしておいたURLのデータ部分にカスタムフィールの値を出力するようにして、imgタグを使って出力させる
元のURL
1 2 3 4 5 6 7 8 9 10 11 12 13 | http://chart.apis.google.com/chart ?chxl=0:|なまけもの度|俺がガンダムだ|おとこらしさ|甘党|不思議ちゃん &chxr=0,0,0|1,0,5 &chxt=x,y &chs=300x340 &cht=r &chco=FF0000 &chds=0,10 &chd=t:10,8,2,7,5,10 ←ここの値を変更する &chdlp=l &chls=2 &chm=B,FF000080,0,0,0 &chtt=おいらのスペック |
このURLのchd=tに、カスタムフィールドの値が出力させるようにする。
また、表示の際はURLエンコードを忘れずに。
変更後のURL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php
//チャートのURLを作成 実際には1行
$chart_url ="http://chart.apis.google.com/chart
?chxl=0:|なまけもの度|俺がガンダムだ|おとこらしさ|甘党|不思議ちゃん
&chxr=0,0,0|1,0,5
&chxt=x,y
&chs=300x300
&cht=r
&chco=FF0000
&chds=0,10
&chd=t:".get_post_meta($post->ID,'hensuu1',TRUE).",".
get_post_meta($post->ID,'hensuu2',TRUE).",".
get_post_meta($post->ID,'hensuu3',TRUE).",".
get_post_meta($post->ID,'hensuu4',TRUE).",".
get_post_meta($post->ID,'hensuu5',TRUE).",".
get_post_meta($post->ID,'hensuu1',TRUE)."
&chdlp=l
&chls=2
&chm=B,FF000080,0,0,0
&chtt=おいらのスペック";
?>
<!-- グラフを表示 -->
<img src="<?php echo urlencode($chart_url); ?>" alt="チャート" /> |
実際の出力結果はこんな感じ
