A note of notions. On web, tech, and others.

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

2008–09–09

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

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

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

参照

デベロッパーガイド（英文）, Google Chart API
デベロッパーガイド（邦訳）, Google Chart API
折れ線グラフ, Google Chart API
棒グラフ, Google Chart API
円グラフ, Google Chart API
散布図, Google Chart API
レーダーチャート, Google Chart API
地図, Google Chart API
QRコード, Google Chart API

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

Google Chart APIを使って動的にグラフを生成する

Posted in /web/tool
ブックマークする:

名前
Webサイト
コメント

Prev: 自転車を買いました

Next: ソースコード整形フォームを Version-Up! しました

検索

同じカテゴリの最近の記事

カテゴリ一覧

about (8)	tracks,
note (15)	daily, update,
photo (17)	bicycle, cooking, day-off, gr-digital, minidigi,
recommend (21)	book, game, movie, music, product, software,
tech (6)	My_PC, gadget,
web (137)	blosxom, culture, design, html-css, javascript, mobile, seminar, server-side, sugamo_css, system-design, tool, trend, work, xml,
word (13)	quote, science, thought,

割と読まれてる記事

個人的によく使う記事

Back to page-top

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

2008–09–09

概説

参照

関連記事

コメントする

検索

同じカテゴリの最近の記事

カテゴリ一覧

割と読まれてる記事

個人的によく使う記事

月別一覧

Flickr

最近の記事

最近のコメント