強火で進め

このブログではプログラム関連の記事を中心に書いてます。

棒グラフ

Google Chart API

基本


Google Chart APIで棒グラフを作る時は以下の様に記述します。

http://chart.apis.google.com/chart
?chs=100x200
&chd=t:50,31.5,28.5
&cht=bvs
&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chxt=x
&chxl=0:|A|B|C|

※見やすい様に改行を入れています。実際は改行無しでブラウザのアドレスバーに入力して下さい。


[改行無しバージョン]

http://chart.apis.google.com/chart?chs=100x200&chd=t:50,31.5,28.5&cht=bvs&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chxt=x&chxl=0:|A|B|C|
パラメータ 説明 例
chs 出力画像のサイズ chs=100x200
chd 値。t:の後にカンマ区切りで指定 chd=t:50,31.5,28.5
cht グラフの種類の設定。bhsの場合は「棒グラフ(縦)」 cht=bhs
chtt グラフのタイトル。画像の上部に記載される。URLエンコードしたUTF-8の文字であれば日本語もOK
chxt 目盛りの表示。x→下の横方向、y→左の縦方向、t→上の横方向、b→右の縦方向 chxt=x/chxt=x,y,t,b/chxt=x,x
chxl ラベルの指定。0:など「数値:」の記述で始める。数値はchxtで指定した目盛り位置に対応。例えば chxt=x,y,t,b の時に 1: で始めると y の目盛り位置のラベルを指定する事になる。 1:|A|B|C|

ラベルを見やすくする


標準の方法で設定するとラベル(A,B,C)の部分が目盛りに重なるぐらいの位置に表示されます。

自分は以下の様な記述で隙間を取る様にしています。

http://chart.apis.google.com/chart
?chs=460x200
&chd=t:50,31.5,28.5
&cht=bvs
&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chxt=x,x
&chxl=0:|%20|%20|%20|1:|A|B|C|

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=460x200&chd=t:50,31.5,28.5&cht=bvs&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chxt=x,x&chxl=0:|%20|%20|%20|1:|A|B|C|

やっている事は chxt=x,x で「下の横方向」に目盛りを2重に設定。ラベルは chxl=0:|%20|%20|%20|1:|A|B|C| の様に記述し、1列目はダミーで空白のラベルを記述する様にしています。

一応、これで解決はするのですがあまりスマートでは無いですね。もっとスマートな方法をご存知の方はコメント欄で教えて頂けると嬉しいです。

色を変える


chco でグラフの色を指定出来ます。

http://chart.apis.google.com/chart
?chs=100x200
&chd=t:50,31.5,28.5
&cht=bvs
&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chxt=x,x
&chxl=0:|%20|%20|%20|1:|A|B|C|
&chco=FF0000|00FF00|0000FF

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=100x200&chd=t:50,31.5,28.5&cht=bvs&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chxt=x,x&chxl=0:|%20|%20|%20|1:|A|B|C|&chco=FF0000|00FF00|0000FF
パラメータ 説明 例
chco |で区切って色を指定します chco=FF0000|00FF00|0000FF

横向きの棒グラフ


  • 横向きの場合は cht の値を bhs にします。
  • 目盛りの位置も変わるため chxt の値は y に変更します。
  • 必要に応じて出力画像のサイズ(chsの値)を変更します。
http://chart.apis.google.com/chart
?chs=200x120
&chd=t:50,31.5,28.5
&cht=bhs
&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chxt=y
&chxl=0:|A|B|C|&chco=FF0000|00FF00|0000FF

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=200x120&chd=t:50,31.5,28.5&cht=bhs&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chxt=y&chxl=0:|A|B|C|&chco=FF0000|00FF00|0000FF

背景色の変更

http://chart.apis.google.com/chart?
chs=200x120
&chd=t:50,31.5,28.5
&cht=bhs
&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chxt=y
&chxl=0:|A|B|C|
&chco=FF0000|00FF00|0000FF
&chf=bg,s,E0E0E0

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=200x120&chd=t:50,31.5,28.5&cht=bhs&chtt=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chxt=y&chxl=0:|A|B|C|&chco=FF0000|00FF00|0000FF&chf=bg,s,E0E0E0
パラメータ 説明 例
chf 値の設定は「範囲,s(常に固定),色」となっています。背景全体に灰色を設定する場合は chf=bg,s,E0E0E0 となります。 chf=bg,s,E0E0E0

chf=c,s,E0E0E0 とした場合はこの様になります。


【参考】

Chart Feature List - Google Chart Tools / Image Charts (aka Chart API) - Google Code
http://code.google.com/intl/ja/apis/chart/docs/chart_params.html#axis_labels

ツール

jsdo.it で簡易作成ツールを作りました。とても簡易的な物なので必要に応じてforkして使って下さい。

2010-12-29 Google Chart APIデータ作成補助ツール - jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/nakamura001/9D8O

公式ページ

Bar Charts - Google Chart Tools / Image Charts (aka Chart API) - Google Code
http://code.google.com/intl/ja/apis/chart/docs/gallery/bar_charts.html