[wp]ワードプレスにGooglechartの円グラフ!これは便利だ！google graph

Google Chartの機能を使ったword pressの　GoogleGraph をインストール by jvrtanoski

https://wordpress.org/plugins/googlegraph/

プラグインサイト
http://tsba.mobi/project/googlegraph-wp-plug-in/

データ・フォーマット事例
https://wordpress.org/plugins/googlegraph/faq/

をインストールし、プラグインを「有効化」すると、WordPressの編集メニューにこんなチャートが！登場！

さっそく、一番カンタンでわかりやすい　PieChart（円グラフ）をつくってみましょう！！

最初作り方がわからなかったけど、わかってきたぞ！！！

【１】まずは、テキストデータを用意する
基本は、[]でくくった個々のデータを用意します。

※エクセルなどのデータからコピペもあり！

こんな感じのデータになります。
[‘knn’, ‘sales’],
[‘ライティング部門’,100],
[‘コンサル部門’,300],
[‘ウェブサービス部門’,100],
[‘投資部門’,100],
[‘シェアリング部門’,300]

※％を計算しないでも勝手に％表示してくれます。入力した数値で100％分配ですね。

❏ミスするポイント注意！
「”」だとグラフ表示できず、必ず「’　’」で囲わないといけません！
ここに気づかずに悩んでいました（泣）

「’」で囲むのが時折、別の文字に変換されるので注意。

【２】そのテキストデータの前の行に【pieChart】最後の行に、【/pieChart】ボタンを押します！

すると…→！　出来た！！！

その後、title部分に　「KNN部門別売上シェア」を追記すると…

Appleの部門別シェアもほら！！！

売上　74,5億99ドル（※7兆4599億円）Apple 2015 QY1

カンタン！！！

ソースはこれだけ！

[‘Apple’, ‘sales’],
[‘iPhone’,51182],
[‘iPad’,8985],
[‘Mac’,6944],
[‘Services’,4799],

Apple SEC Filingsより

【３】以上！理解ができたら超！カンタン！

他にもたくさんあるので、すこしづつマスターしていきます！

Geo Chart

Line Chart

Bar Chart

【４】他にも、Google Chart API JPEG 書き出しの方法もありました！

ソースはこちらです。
カギカッコタグ

img src=”http://chart.apis.google.com/chart?cht=p3&chtt=世界トップ100万サイト中のCMS利用率&chs=600×250&chd=t:15.7,13.3,71.0&chdl=15.7% WordPress|13.3% 他のCMS|71.0% CMS未使用&chl=WordPress|他のCMS|CMS未使用” /

カギカッコタグ閉じる

%の比率がわかっていたらこちらも便利かも！
※しかしクリッカブルみたいなことはできないですね。
テキストだけでJPEG表示できるのはいいけど、ちょっと一行で書くには最新の注意が必要。半角の空白とか打ってしまって失敗よくしてしまう

※レイアウトバランスの調整もむずいかも！

【参考】
Google Chart Tools の使い方
http://yohshiy.blog.fc2.com/blog-entry-195.html

WordPressの投稿記事に綺麗なグラフやチャートを表示する『GoogleGraph』がめっちゃ便利！
http://webya.opdsgn.com/wordpress/wordpressgooglegraph/

WordPressにGoogle Chart APIを実装して、簡単に円グラフや棒グラフや折れ線グラフなどを書く方法
http://wp3.jp/2012/01/04/google-chart-api/