Google Chart APIで作るグラフ画像のサンプル

/web/tool

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

Note: Chart APIは現在ではGoogle Chartとして整理されており、この記事で利用されているImage Chart APIは旧仕様として削除対象になっています。実際に削除はされていないので今のところ利用できていますが、2015年中には消えてしまいそうです。(2015-08-31)

コピペ用に作ってみた。いやー軽い軽い。JSで<canvas>で図形描画なんて馬鹿らしくなっちゃうね。ちなみに色はあんまり弄ってない。考えたら暖色系って盛り上がってる感じがするから、このままのが良いかもね。

では続きをどうぞ。 ...そういえば、商用利用できたっけ？

折れ線グラフ
<img src="http://chart.googleapis.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chm=s,FF9904,0,-1,6" />
折れ線グラフ(塗りつぶし)
<img src="http://chart.googleapis.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chls=2,7,4
&amp;chcs=FF9900
&amp;chm=B,FFC266,0,0,0" />
折れ線グラフ(範囲マーカー)
<img src="http://chart.googleapis.com/chart?cht=lc
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,10,14,30,80,40,100
&amp;chm=r,FFEBCC,0,0.20,0.75|s,FF9904,0,-1,6" />
棒グラフ
<img src="http://chart.googleapis.com/chart?cht=bvs
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chco=FFC266
&amp;chd=t:10,50,14,30,80,40,20" />
棒グラフ(データ線付き)
<img src="http://chart.googleapis.com/chart?cht=bvs
&amp;chs=300x125
&amp;chg=20,50,1,5
&amp;chxt=x,y
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,50,14,30,80,40,20
&amp;chco=FFC266
&amp;chm=D,FF9900,0,0,3,1" />
棒グラフ(テキストマーカー)
<img src="http://chart.googleapis.com/chart?cht=bhg
&amp;chs=300x250
&amp;chg=20,50,1,5
&amp;chxt=y,x
&amp;chxl=0:|1|2|3|4|5|6|7|1:|0|30|90
&amp;chd=t:10,50,14,30,80,40,20
&amp;chm=tHomepage,333333,0,0,13,1|tPamphlet,333333,0,1,13,1|tDirect+mail,333333,0,2,13,1|tInfomation,333333,0,3,13,1|tOther+Sites,333333,0,4,13,1|tAds,333333,0,5,13,1|tNews+paper,333333,0,6,13,1
&amp;chco=FFC266" />
円グラフ
<img src="http://chart.googleapis.com/chart?cht=p
&amp;chd=t:14711,11684,3431
&amp;chs=300x150
&amp;chl=1|2|3" />
円グラフ(3D)
<img src="http://chart.googleapis.com/chart?cht=p3
&amp;chd=t:14711,11684,3431
&amp;chs=300x150
&amp;chl=1|2|3" />
レーダーチャート
<img src="http://chart.googleapis.com/chart?cht=r
&amp;chd=t:80,30,99,60,50,20
&amp;chs=300x200
&amp;chls=3,0,0
&amp;chxt=x,y
&amp;chxl=0:|Str|Vit|Agi|Dex|Int|Luk|1:|||||
&amp;chm=B,FF990080,0,0,5" />
QRコード
<img src="http://chart.googleapis.com/chart?cht=qr
&amp;chs=300x100
&amp;chl=http%3a//archiva.jp/" />

概説

パラメータ 意味 構文
cht 図のタイプ cht=lc
chs 図のサイズ chs=250x100
chg グリッド線 chg=[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線]
chxt 複数軸ラベル（軸タイプ） chxt=x,y,r,x
chxl 複数軸ラベル（軸ラベル） chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|100|
2:|A|B|C|
3:|2005|2006|2007
chls 線のスタイル chls=[線の太さ],[線の長さ],[空白の長さ]
chcs 線の色 chcs=FF9900
chco チャートの色 chco=FFC266
chm=r 範囲マーカー chm=[r(水平範囲)/R(垂直範囲)],[色],0,[始点],[終点]
chm=D 棒グラフのデータ線 chm=D,[色],[data set index],0,[サイズ],[描画順序 1/0/-1]
chm 図形マーカー chm=[図形タイプ],[色],[data set index],[data point],[サイズ],[描画順序 1/0/-1]

ここで図形タイプとは、以下から選ぶ。

a 矢印
c 十字
d ひし形
o 円
s 正方形
t 任意のテキスト（スペースは + で表す）
v x軸の直線（データポイントまで）
V x軸の直線（図の上端まで）
h y軸の直線（チャートを横切る水平線）
x ×印

参照

memo: 「凡例は手で書けば良いやー」と載せなかったけど、文字列をURLエンコードすれば日本語も通るみたい。

Update: ドキュメントのリンクが変わっていたので、反映しました。(2010-10-19)

Update: IEで非表示との報告を受け、http://chart.apis.google.com/chart?... から http://chart.googleapis.com/chart?... に変更しました。(2015-08-31)

関連記事

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。