用 Google Chart 製作圖表和嵌入式地圖

google chart

 

 

之前研究加密貨幣錢包爬蟲的時候,發現原來 Google 有開放免費的圖表 API 供大家串接。使用方法也很簡單,依據需求填入資料即可。

 

不過它畢竟是 Google 提供的線上服務,沒人知道哪天會不會突然收回去、宣佈停止運作。因此流浪貓建議各位這種工具偶而使用即可,千萬別傻傻的全依賴它來建立重要的圖表資料。習翠習維尼

 

Google Chart API

官方圖表範例

 

 

基本概念

要用 Google Chart API 繪製圖表,首先需具備以下三種參數:

cht: 圖表型態
chs: 圖表大小
chd: 數據參數

顏色 (chco) 與指定圖例 (chdl) 等參數則斟酌使用。

 

 

常用圖表類型

cht=bvg 長條圖
cht=lc 折線圖
cht=ls 走勢圖
cht=lxy 折線圖上產生點
cht=p 2D圓餅圖
cht=p3 3D圓餅圖
cht=pc 兩個資料序列的圓餅圖
cht=r 雷達圖
cht=s 散佈圖

 

 

繪製長條圖

cht=bvg
chs=300x200
chd=Data
chxt=x,y
chxl=資料名稱

https://chart.googleapis.com/chart?cht=bvg&chs=300x200&chd=t:50.8,28.7,25.6,24.3,23.9,22.5&chxt=x,y&chxl=0:|K'WA|Ubye|Wish|Nyoro|UsagiHime|Lilith

 

長條圖

 

繪製圓餅圖
https://chart.googleapis.com/chart?cht=pc&chs=300x200&chd=t:50.8,28.7,25.6,24.3,23.9,22.5&chxt=x,y&chxl=0:|K'WA|Ubye|Wish|Nyoro|UsagiHime|Lilith

圓餅圖 google chart

 

 

繪製 QRcode

cht=qr 
chs=300x300
chl=Data
choe=OUTPUT_ENCODING, 預設 UTF-8
https://chart.googleapis.com/chart?cht=qr&chs=500x500&chl=https://www.mrguarder.com

流浪貓的知識庫 QR Code

 


繪製 Google-O-meter 圖表

計量表或「撥號類型圖」是一種以背景顏色漸層和資料箭頭指標來表達數值大小的圖表形式。

cht=gom

https://chart.googleapis.com/chart?cht=gom&chs=300x200&chd=t:50.8,28.7&chxt=x,y&chxl=0:|K'WA|Ubye

google o meter

 

Developer Chart 計量表

 

 

 

 

繪製地圖圖表

雖然 Google map 有匯出與分享的功能,讓使用者能將目標位置內嵌在網站上,但如果你只是想簡單的呈現位置的話,可以用 Google Chart 來展示地圖。

 


基本參數

cht=map:fixed=<bottom_border_lat>,<left_border_long>,<top_border_lat>,<right_border_long>

cht=map:fixed=21,118,26,123  圖表縮放區域:緯度 21 到 26 度,經度 118 到 123 度
chld=TW-TPE|TW-TXG|TW-PIF
chm: 圖表標記
chma=10,10,10,10 加上 10px 的邊框
chtt=台灣地圖:新北、台中、屏東

https://chart.googleapis.com/chart?cht=map:fixed=21,118,26,123&chs=500x500&chld=TW-TPE|TW-TXG|TW-PIF&chco=B3BCC0|5781AE|FF0000|FFC726&chtt=台灣地圖:新北、台中、屏東&chma=10,10,10,10&chm=

 

 

chart map

 

 


 

 

 

延伸閱讀

更多 Blogger 教學

更多 SEO 戰技

Chart 地圖圖表

Chart 泡泡圖

https://en.wikipedia.org/wiki/ISO_3166-2:TW

https://en.wikipedia.org/wiki/ISO_3166-2