Google Chart API

阮一峰發表於2007-12-10

上週,Google公佈了製圖服務(Google Chart)的介面,可以用來為統計資料自動生成圖片。

這項服務用起來相當簡單,不用安裝任何軟體,只使用瀏覽器就可以。比如,在瀏覽器的位址列中,鍵入如下的地址:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World&chtt=Hello+World

就可以看到下面的圖片:

Google Chart API

各個引數的含義:

  * cht(chart type):圖表種類,cht=p3表示生成3D餅圖。

  * chs(chart size):圖表面積,chs=250x100表示寬200畫素,高100畫素。

  * chtt(chart title):圖表標題,chtt=Hello+World表示標題是Hello World。

  * chd(chart data):圖表資料,chd=s:hW表示資料是普通字串(simple string)hW。目前,允許的編碼選擇有simple (s)、extended (e)和text (t)。

目前,Google Chart一共提供五種圖,分別是折線圖(line charts)、條狀圖(bar charts)、餅圖(pie charts)、Venn圖(venn diagrams)和散點圖(scatter plots)。

googlechartex.png

下面,我根據說明文件,簡單介紹一下,如何生成最常見的條狀圖和餅圖。

條狀圖

下面這張表是各大洲最高峰一覽表。

山峰高度(單位:米)
珠穆朗瑪峰(亞洲)8848
乞力馬扎羅山(非洲)5895
厄爾布魯士山(歐洲)5642
麥金利山(北美)6194
阿空加瓜山(南美)6960
查亞山(大洋洲)5029
文森山(南極洲)5140

根據上表,可以生成下面的條狀圖:

Google Chart API

使用的網址是:

雖然這個網址看起來很複雜,但實際上很容易編寫,請跟著我一項項分解:

1. http://chart.apis.google.com/chart?

這部分是google圖表服務的網址,所有生成的圖表都必須使用這個網址。

"?"後面跟的是引數,格式是"引數名=引數值"。不同的引數之間用"&"分割,次序無所謂。

2. chs=250x250

這一項表示圖片的面積,寬x長,單位是畫素。

面積最大不能超過30萬畫素,長和寬最大不超過1000畫素。比如,如果上圖放大一倍,可以使用chs=500x500

3. chd=t:88.48,58.95,56.42,61.94,69.60,50.29,51.40

這一項"chd=t:"表示圖表所用的資料集,最小的值是0.0,最大的值是100.0。

因此,山峰的高度必須改寫為88.48、58.95、56.42、61.94、69.60、50.29、51.40,資料與資料之間用逗號分割。

4. cht=bvs

這一項表示所使用的圖表型別,bvs表示"豎直條形圖",bhs表示"水平條形圖",lc表示折線圖。

5. chco=ff0000

這一項表示條塊的顏色,ff0000表示紅色。如果想生成藍色條塊,就使用0000ff

6. chf=c,s,76A4FB|bg,s,FFF2CC

這一項表示填充色,其中又分為兩個部分。

"c,s,76A4FB"表示內容部分(c)用藍色(76A4FB)填充,"bg,s,FFF2CC"表示背景色(bg)用淡黃色(FFF2CC)填充。它們之間用豎線"|"分割。

7. chxt=x,y

這一項表示座標軸採用底部的x軸和左邊的y軸。

8. chxl=0:|Asia|Afri|Euro|AmeN|AmeS|Ocea|Anta|1:|0|5km|10km

這一項表示座標軸的刻度。

由於只能使用英語,所以x軸的刻度是各大洲的英語縮寫,用"0:"開頭,y軸的刻度是5千米和1萬米,用"1:"開頭,所有資料之間用豎線分割。

餅圖

下面再舉一個餅圖的例子。

假定某商場上半年各月份的銷售額佔總銷售額的比例,依次為19%、21%、14%、16%、15%和15%。那麼畫成餅圖,就是下面的樣子:

Google Chart API

使用的網址是:

與上面的條狀圖相比,只有兩個地方需要說明。

1. cht=p3

這一項表示圖片型別為三維餅圖,如果使用二維餅圖,這一項要改為"cht=p"。

2. chl=Jan|Feb|Mar|Apr|May|June

這一項表示為餅圖中每一項資料加上圖例。

更多的選項和如何使用多個資料集,請參考Google Chart的說明文件

(完)

相關文章