110427_1

タグ内にGoogle Chart APIのコードを書くと
あら不思議!簡単にグラフが描けちゃうという仕組み!

後々数値が変わってしまう可能性があるデータを取り扱う場合にかなり便利です!

たとえば円グラフの描き方

こんな感じのコードを書いていきます。


<img src="http://chart.apis.google.com/chart?cht=p3
&chtt=好きな人との「思い出の映画」ありますか?
&chs=550x250
&chd=t:21,55.3,18,5.7
&chco=0092B9,86AD00,F2B705,BC3603
&chl=たくさんある|少しある|ない|わからない" alt="" />

Google Chart APIで試しに3D円グラフを描いてみたのデモページへ

赤で指定しているのはグラフの種類です。
16種類指定ができます。

  1. lc – 折れ線グラフ
  2. lxy – 折れ線グラフ
  3. bhs – 棒グラフ(横)
  4. bvs – 棒グラフ(縦)
  5. bhg – 棒グラフ(横)グループ化
  6. bvg – 棒グラフ(縦)グループ化
  7. p – 円グラフ
  8. p3 – 円グラフ3D
  9. v – ベン図
  10. s – 散布図
  11. ls – スパークライン
  12. r – レーダー(直線)
  13. rs – レーダー(曲線)
  14. t – 地図
  15. gom – Google-o-meter
  16. qr – QR コード

QR コードMAPチャートなるものがかなり気になる!いろいろ使えそう!!!

青で指定しているのはチャートのタイトルです。
適切なタイトルをつけましょう!

緑色で指定しているのは画像の横幅と縦幅です。
自由に大きさが決められます!

ピンクで指定しているのは各項目の数値です。
左から順番にカンマ区切りで指定していきます。

紫で指定しているのは各項目のカラーです。
こちらも左から順番にカンマ区切りで指定していきます。

オレンジ色で指定しているのは各項目の名前です。
こちらも左から順番にカンマ区切りで指定していきます。

ほかのグラフの例は!?

googleが紹介しているChart Galleryに掲載されています。
http://code.google.com/intl/ja/apis/chart/docs/gallery/chart_gall.html

グラフジェネレータつくりました。

追記 11/04/27
さっそくグラフジェネレーターを作ってみました。現時点では円グラフのみですw
http://arisa.biz/ggraph/