 |
グラフを描いてみる「Google Chart API」
2008.9.15記 |
今回は Google Chart API を使ってグラフを描いてみます。
http://code.google.com/intl/ja/apis/chart/
（ http://code.google.com/apis/chart/ ）
http://code.google.com/intl/ja/apis/chart/
（ http://code.google.com/apis/chart/ ）
折れ線グラフ
年別オリンピックでの日本の金メダル数
<img src="http://chart.apis.google.com/chart?cht=lc&chco=ff0000&chs=500x300
&chd=t:50,20,15,15,25,80,45&chxl=|84|88|92|96|00|04|08&chxr=0,20" />http://chart.apis.google.com/chart?
cht=lc （グラフの種類：lc は折れ線グラフ）
&chco=ff0000 （グラフの色：ff0000 は赤色）
&chs=500x300 （グラフサイズ：横500、縦300ピクセル）
&chd=t:50,20,15,15,25,80,45 （グラフデータ）
&chxl=|84|88|92|96|00|04|08 （グラフラベル：X軸）
&chxr=0,20 （グラフラベル範囲：Y軸）
棒グラフ
北京オリンピックでの日本の金銀銅別のメダル数
<img src="http://chart.apis.google.com/chart?cht=bhs&chs=500x200&chbh=40,30
&chd=t:60,40,66.6&chxt=x,y&chxl=0:|0|5|10|15|1:|Bronze|Silver|Gold|" />http://chart.apis.google.com/chart?
cht=bhs （グラフの種類：bhs は横の棒グラフ）
&chs=500x200 （グラフサイズ：横500、縦200ピクセル）
&chbh=40,30 （グラフの棒のサイズ：40ピクセルで間隔30ピクセル）
&chd=t:60,40,66.6 （グラフデータ）
&chxt=x,y （軸設定）
&chxl=0:|0|5|10|15|1:|Bronze|Silver|Gold| （グラフラベル）
スパークライン
<img src="http://chart.apis.google.com/chart?chs=300x60&cht=ls&chco=0077CC
&chm=B,E6F2FA,0,0,0&chls=1,0,0&chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,
25,31,25,25,25,26,26,25,25,28,25,25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,
34,25,26,25,36,25,26,37,33,33,37,37,39,25,25,25,25" />http://chart.apis.google.com/chart?
chs=300x60 （グラフサイズ：横300、縦60ピクセル）
&cht=ls （グラフの種類：ls はスパークライン）
&chco=0077CC （グラフ色）
&chm=B,E6F2FA,0,0,0 （グラフ線とX軸との間の設定のようです）
&chls=1,0,0 （グラフ線のスタイル[線の太さ],[線の長さ],[空白の長さ]）
&chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,25,31,25,25,25,26,26,25,25,28,25,
25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,34,25,26,25,36,25,
26,37,33,33,37,37,39,25,25,25,25 （グラフデータ）
棒グラフ
北京オリンピックでの日本の金銀銅別のメダル数
<img src="http://chart.apis.google.com/chart?cht=p&chd=t:9,6,10&chs=400x240
&chl=Gold+9|Silver+6|Bronze+10" />http://chart.apis.google.com/chart?
cht=p （グラフの種類：p は2次元円グラフ、p3なら3次元）
&chd=t:9,6,10 （グラフデータ）
&chs=400x240 （グラフサイズ：横400、縦240ピクセル）
&chl=Gold+9|Silver+6|Bronze+10 （グラフデータ）
ベン図
<img src="http://chart.apis.google.com/chart?cht=v&chs=300x200
&chd=t:100,80,60,30,30,30,10" />http://chart.apis.google.com/chart
?cht=v （グラフの種類：v はベン図）
&chs=300x200 （グラフサイズ：横300、縦200ピクセル）
&chd=t:100,80,60,30,30,30,10 （グラフデータ）
- 最初の 3 つの値は、3 つの円 A、B、C の相対的なサイズを指定します。
- 4 番目の値は、A と B の交わりの面積を指定します。
- 5 番目の値は、A と C の交わりの面積を指定します。
- 6 番目の値は、B と C の交わりの面積を指定します。
- 7 番目の値は、A と B と C の交わりの面積を指定します。
散布図
<img src="http://chart.apis.google.com/chart?cht=s
&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn
&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=400x250" />http://chart.apis.google.com/chart?
cht=s （グラフ種類：s は散布図）
&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn （グラフデータ）
&chxt=x,y （グラフ軸）
&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100 （グラフラベル）
&chs=400x250 （グラフサイズ：横400、縦250ピクセル）
データセットの1番目はX軸、2番目はY軸、3番目はデータサイズ
（グラフサイズだけ変えて値はデベロッパーガイドのままです
）
レーダー チャート
<img src="http://chart.apis.google.com/chart?cht=r&chs=300x300&chd=t:60,40,66.6,60
&chco=FF0000&chxt=x&chxl=0:|Gold+9|Silver+6|Bronze+10" />http://chart.apis.google.com/chart?
cht=r （グラフ種類：r はレーダーチャート）
&chs=300x300 （グラフサイズ：横300、縦300ピクセル）
&chd=t:60,40,66.6,60 （グラフデータ）
&chco=FF0000 （グラフ色）
&chxt=x （グラフ軸）
&chxl=0:|Gold+9|Silver+6|Bronze+10 （グラフラベル）
ラベルが３つのところに、データも３つ用意し余分にひとつ最初のデータを追加し４つにすると、レーダーチャートが繋がりました。
Maps
<img src="http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:Af9
&chco=ffffff,ff0000,00ff00,0000ff&chld=JPMNIN&chtm=asia&chf=bg,s,EAF7FE" />http://chart.apis.google.com/chart?
cht=t （グラフ種類：t はMaps）
&chs=440x220 （グラフサイズ：横440、縦220ピクセル）
&chd=s:Af9 （グラフデータ、どこに使う？ ないと表示できない）
&chco=ffffff,ff0000,00ff00,0000ff （着色する色、ひとつめはベース色）
&chld=JPMNIN （着色する国）
&chtm=asia （表示する地域）
&chf=bg,s,EAF7FE （無地塗りつぶし）
サンプルをアジアに変えてみただけ
JP（日本）、MN（モンゴル）、IN（インド）
（インドって飛び地みたいなのがあるんだ、今更ながらに知る）
Google-o-meter
<img src="http://chart.apis.google.com/chart?chs=300x150&cht=gom&chd=t:70&chl=Hello" />
http://chart.apis.google.com/chart?
chs=300x150 （グラフサイズ：横300、縦150ピクセル）
&cht=gom （グラフ種類：gom はGoogle-o-meter）
&chd=t:70 （グラフデータ）
&chl=Hello （データラベル）
QRコード
日本語版のデベロッパーガイドにはまだありません。英語版には凡例とかの説明もあり。
複雑ではないものならウェブ上にグラフを簡単につくれるので便利だね。
 2008.10.15 広角コンパクトデジカメ2008 |
 2008年 |
 2008.8.15 Tour de France 2008 #95 |
ホーム