5,428 Views

[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(円グラフ)をつくってみましょう!!

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

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

[‘円グラフタイトル’, ‘sales’],
[‘項目’,’データ数字(%ではなく数値)’],
[‘項目’,’データ数字(%ではなく数値)’],
[‘項目’,’データ数字(%ではなく数値)’],
[‘項目’,’データ数字(%ではなく数値)’],
[‘項目’,’データ数字(%ではなく数値)’],

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

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

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

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

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

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

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

Powered by TSBA.mobi GoogleGraph Wordpress plugin

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

Powered by TSBA.mobi GoogleGraph Wordpress plugin

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

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

Powered by TSBA.mobi GoogleGraph Wordpress plugin

カンタン!!!

ソースはこれだけ!

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

Apple SEC Filingsより

【3】以上!理解ができたら超!カンタン!

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

Geo Chart

Powered by TSBA.mobi GoogleGraph Wordpress plugin

Line Chart

Bar Chart

【4】他にも、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/

スポンサーリンク