強火で進め

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

円グラフ

基本


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

http://chart.apis.google.com/chart
?chs=250x200
&chd=t:50,31.5,28.5
&cht=p
&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chl=A|B|C

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


[改行無しバージョン]

http://chart.apis.google.com/chart?chs=250x200&chd=t:50,31.5,28.5&cht=p&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chl=A|B|C

cht の値を p にすると円グラフに成ります。その他のパラメータについては前回の棒グラフの場合の説明を参照下さい。

なお、サンプルでは値の合計が100に成っていますが特に100にする必要はありません。オーバーしたり、100に満たない場合も適切に処理される様です。

円グラフ(3D)


立体的な円グラフも可能です。 cht の値を p3 にすると立体的な円グラフに成ります。

http://chart.apis.google.com/chart
?chs=320x200
&chd=t:50,31.5,28.5
&cht=p3
&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chl=A|B|C

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=320x200&chd=t:50,31.5,28.5&cht=p3&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chl=A|B|C

円グラフ(3D)の場合は3Dで無いものに比べて横幅がより多く必要です。3Dにした時にこの様にラベル部分が切れて表示される場合は横幅を増やしてみて下さい。

色を変える


色を変える場合は棒グラフの時と同様、 chco に色を指定すればOKです。

http://chart.apis.google.com/chart
?chs=320x200
&chd=t:50,31.5,28.5
&cht=p3
&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB
&chl=A|B|C
&chco=FF0000|00FF00|0000FF

[改行無しバージョン]

http://chart.apis.google.com/chart?chs=320x200&chd=t:50,31.5,28.5&cht=p3&chtt=%E3%82%B3%E3%82%B3%E3%81%AB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB&chl=A|B|C&chco=FF0000|00FF00|0000FF


【参考】

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

公式ページ

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