Category Posts Navigation

Google Chart ToolsでWordPressにグラフを表示する方法

@AirzP

Posted by @AirzP

Google Chart ToolsでWordPressにグラフを表示する方法

今回はWordPressでブログを書かれている人の為、というより
自分がまた新たにWordPressでグラフを表示させたくなった時の為に
覚書としてGoogle Chart ToolsをWordPressで使う方法をメモしておきます。



このブログではレーダーチャートを用いてSUTEKI-iTemsの評価として使っておりますが、
その他にも様々な理由でブログ記事にグラフを載せたい場合はあるのではないでしょうか。

それが一回や二回の場合はカスタマイズ性能や操作性からExcelなどの表計算ソフトを使う方法も
なくはないとは思いますが今回は「多くの記事に同じフォーマットでグラフを載せたい」という条件で
Google Chart Toolsを使ってWordPressに表示させる、毎回表示させやすくする方法を書いて行きたいと思います。

Google Chart Toolsは以下のリンクから行くことができます。
https://developers.google.com/chart/

ページ先に行ってもグラフを作る画面にすぐに行けるボタンは見当たりません(2013/03/01現在)
以下の手順でチャートウィザードの画面へと移るか、下記のリンクをクリックして移動します。

1.ページ下部の
Looking for the Image Charts API?
The Image Charts API is still available 「here」.←をクリック

2.ページ右下の
How Do I Start?の3番目

Try making your own chart on our 「chart wizard」.←をクリック

https://developers.google.com/chart/image/docs/chart_wizard

3.グラフが表示されるのでお好きなグラフをクリック
「Show full gallery ►」を選択することで、さらに多種のグラフを表示させられます。

g1 284x300 Google Chart ToolsでWordPressにグラフを表示する方法
今回は円グラフを選択してみます。

4.編集画面に変わるのでオプションを変更したり「+」をクリックし内容を入力します。
毎回表示させやすい設定をしやすくするために、ここではわかりやすいテキストや数値を入れてみましょう。

g2 300x241 Google Chart ToolsでWordPressにグラフを表示する方法
各種項目をいじると、それにあわせて右側の円グラフもリアルタイムに変化するので簡単に設定ができるでしょう。

・Options for Pie Chart
円グラフの形状を選択
Options for Pie Chartは円グラフの角度を変更できます
※初期設定のままの0だとデータの始まりの場所が3時の場所で、私としては分かりづらいので今回は4.7にしてみます。
4.7に設定すると12時の場所からデータが始まります。

・Title
円グラフの上に表示されるタイトルを変更できます(日本語可能)
色やサイズも決められます

・Size
グラフの画像自体の大きさを変更できます

・Data
グラフに使う数値データを変更できます
DataSet内のSizeはグラフを何分割するかです
今回は初期のままで4としておきます
Data valuesは分かりやすいように自分で入力します
数値と数値の間は半角スペースで空けます
例:10 5 3 2

Google Chart Toolsの数値データは、自動的に計算され割合で表示されます(%)
10 + 5 + 3 + 2 = 20
10/20 = 50/100 なので 10は50%を占めることになります

g3 Google Chart ToolsでWordPressにグラフを表示する方法
角度を4.7にし、Data valuesを 10 5 3 2 と入力したグラフはこうなります。

Legendは凡例です
ここではA B C Dと入力してみました
すると、円グラフの右側に書かれている凡例が変化します

Labelはラベルです
ここではa b c dと入力してみました
すると、円グラフに各文字から実線が伸びてラベルが記入できます
※LegendもLabelも 何もデータを入れなければ項目は消滅します

g4 300x222 Google Chart ToolsでWordPressにグラフを表示する方法

・Data Style
凡例の位置やグラフの色などを変更できます
今回は凡例(Legend)の場所はそのままで、色だけ青くしてみました。

・Fills
グラフの背景色と画像自体の透明度を変更できます
今回は初期設定のまま何も設定していません

・Margins
円グラフの周りの余白の大きさを変更できます
今回は初期設定のまま何も設定していません

・Additional Style
ラベルの色とフォントサイズ、グラフの色を変更できます
Data Styleの色変更との違いはData Styleの場合データ一個一個の色を変更するのに比べて
これはグラフ全体を変更できます。二色決めてグラデーションをかける場合などに有効でしょう

さて、長かったですが設定は終わりです。

5.
ページ右側の「Paste HTML to embed in website」と書かれている場所の下の欄のHTMLコードをコピーします。

g5 300x239 Google Chart ToolsでWordPressにグラフを表示する方法
メモ帳に貼り付けるなどして保存しておきます。
また、今回入力したデータは念のため覚えておきましょう。

今回入力して、かつ、WordPressの記事ごとに変えうるデータ

グラフの色:2E71F5(カラーコード)
データ値:10 5 3 2
凡例:A B C D
ラベル:a b c d

※グラフの角度や形状は毎回変える必要はあまりないので今回は割愛させていただきます。

6.WordPressのプラグイン「Custom Field Template」をインストールします。
他にもカスタムフィールドを扱えるプラグインはありますが、私はこれを使っております。
これからの設定は「Custom Field Template」を使用した設定になります。

このプラグインを使うことによって
ブログ記事を作成する欄の下に、これから作成するカスタムフィールドが表示されるようになります。
記事を書いた後にグラフを生成する際は各欄に文字や数字を入れて、グラフを表示する為のコードを記事内に書くだけで
ブログ内にグラフが生成されるようになります。

7.WordPrssの[設定]メニュー→[カスタムフィールドテンプレート]を選択します。
カスタムフィールドテンプレートのプラグインにははじめから一つサンプルのカスタムフィールド設定が入っております。
今後も参考に成りうるため、今回はこれを保持し新たに作成します。

[カスタムフィールドテンプレートオンプション]内の[TEMPLATE #1]と書かれている場所から下を編集していきます。

8.[テンプレートタイトル:]にわかりやすいタイトルを入れます。
今回は円グラフとしておきます。

9.[テンプレートコンテンツ:]にグラフ生成時に変更したい項目を記入していきます。

書き方:

[color]
type = text
size = 8
label = グラフの色

[○○○○]半角英数で分かりやすい単語にします
type テキストを入力するのでこのままにします
size テキスト欄の幅
label 入力時に表示されるので分かりやすい言葉にします

今回の場合はグラフ色,データ値,凡例,ラベルを変更したいので下記のようにしてみます。

例:

 Google Chart ToolsでWordPressにグラフを表示する方法
[color]
type = text
size = 8
label = グラフの色

[value1]
type = text
size = 4
label = データ1

[value2]
type = text
size = 4
label = データ2

[value3]
type = text
size = 4
label = データ3

[value4]
type = text
size = 4
label = データ4

[legend1]
type = text
size = 16
label = 凡例1

[legend2]
type = text
size = 16
label = 凡例2

[legend3]
type = text
size = 16
label = 凡例3

[legend4]
type = text
size = 16
label = 凡例4

[label1]
type = text
size = 16
label = ラベル1

[label2]
type = text
size = 16
label = ラベル2

[label3]
type = text
size = 16
label = ラベル3

[label4]
type = text
size = 16
label = ラベル4

10.ページ下部の「[ cft ] and [ cftsearch ] Shortcode Format」をクリックします。

11.FORMAT #1の下に先ほどGoogle Chart Tools内でコピーしたHTMLコードを貼り付けます。

下記に一部抜粋
cht=p&chco=2E71F5&chd=t:10,5,3,2&chdl=A|B|C|D&chdlp=l&chp=4.7&chl=a|b|c|d

内容を変更していきます。
それぞれが示す箇所を先ほど入力した[○○○○]と置き換えていきます。

まず 2E71F5 と 書かれている場所を [color] に変更します

cht=p&chco=[color]&chd=t:10,5,3,2&chdl=A|B|C|D&chdlp=l&chp=4.7&chl=a|b|c|d

同じように
10 5 3 2 を value1~4に
A B C D を legend1~4に
a b c d を label1~4に
変更します。

cht=p&chco=[color]&chd=t:[value1],[value2],[value3],[value4]&chdl=[legend1]|[legend2]|[legend3]|[legend4]&chdlp=l&chp=4.7&chl=[label1]|[label2]|[label3]|[label4]

12.全ての置き換えが終わったら[オプションを更新する]をクリックします。
これで設定は終わりです!お疲れ様でした!

ではブログ記事を書く画面に行ってみてください。
入力画面の下に[カスタムフィールドテンプレート]という項目があります。
[デフォルトテンプレート]となっているところをクリックし、[円グラフ]を選択し読み込みます。

すると先ほど設定したカスタムフィールドがでてきます。

13.各項目を埋めます。
カラーコードにはカラーコードを値や凡例、ラベルにはそれぞれ的確なテキストをいれていきます。
全て埋まったら右上の保存ボタンをクリックして準備完了です。

14.記事内にカスタムフィールドテンプレートの中身を表示するコードを記入します。
[○○○○]と入力します。○○○○はcft format=1です。
1というのは先程作成したカスタムフィールドの番号が1だからです。

 Google Chart ToolsでWordPressにグラフを表示する方法
↑これは私のブログでよく使ってるレーダーチャートです。
うまくいっていればここに円グラフが表示されるはずです。

カスタムフィールドテンプレートについて細かく解説されているサイトもありますので、
これより綺麗なカスタムフィールドは作れるはずです。


コメントを残す

メールアドレスが公開されることはありません。

/>

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2017年6月
« 8月    
 1234
567891011
12131415161718
19202122232425
2627282930