2010年6月4日 星期五

Google Chart API Tools 彙整





Google Chart API Tools 彙整

本文內容皆由網路收集,及整理與練習實做

每部分皆附上出處的網站網址,如有侵權請留言.謝謝



[1]Google 提供


Google Chart Tools - Google Code

- [ 翻譯此頁 ]
Provides several tools for making data more comprehensible. Special URLs can be used to embed graph and chart images in users'' own web pages.
code.google.com/apis/charttools/ - 頁庫存檔 - 類似內容


[2]參考資源(1)

Google Chart API 中文版- 开发者指南

- [ 轉為繁體網頁 ]
Google Chart API 参考中文版,提供强大的在线图表功能,生成的图表可直接以图片形式嵌入您的网页。调用方服务器无需支持动态语言。
labs.cloudream.name/google/chart/api.html

內含大量 簡體中文 資料

介紹詳盡 若不排斥 可做為參考



[3]Google Chart API
  1. 可以動態產生圖表免費使用URL網址即可呈現Google Chart API 為每個請求回傳一個PNG 格式圖片。目前提供:折線圖、柱狀圖、餅圖、維恩圖、散點圖。 (還有不可思議圖....)可以設定圖表尺寸、顏色和圖例!
  2. Hello|World範例如網址:
可以看到如下圖表

展示範例



[4]使用注意事項:
  1. API使用URL回傳圖片
  2. 每天請求圖片的次數沒有限制,但Google保留拒絕濫用請求的權利。 如果您每天的請求次數大於250,000次,請將預計請求次數告知:chart-api-notifications@google.com。
  3. Image Charts (Google Chart API) Data Size Limit Up to 2K characters in a GET request; up to 16K characters in a POST request. 翻譯的意義:用GET網址能使用的字元是2K. 用POST是無限.
  4. Interactive Charts (Google Visualization API) Data Size Limit No limit.
  5. IE對URL也有長度限制的問題。HTTP協議規範也沒有對URL長度進行限制。這個限制是特定的瀏覽器及服務器對它的限制。IE對URL長度的限制是2083字節(2K+35)。對於其他瀏覽器,如Netscape、FireFox等,理論上沒有長度限制,其限制取決於操作系統的支持。
  6. 使用中文需要轉換文字













[5]中文的參考範例:
http://chart.apis.google.com/chart?cht=p3&chd=t:11,89&chs=320x120&chl=%E7%94%B7|%E5%A5%B3

顯示的圖表如下:



說明:
http://chart.apis.google.com/chart? 是 google chart api 程式,
參數的部分:
  1. cht=p3 是指 chart type 是 pie chart 3d. 選擇圖片類型,如現在是立體圓餅圖
  2. chd=t:51,49 是指 chart data , 資料用逗號隔開. 各項資料的比例,注意順序要與chl對應,以 , 分隔
  3. chs=320x120 是指 chart size , 也就是 320 * 120. 圖片大小,Google提供支援到300000畫素,可以自訂為1000*300,750*400,600*500等等,注意若文字過長被圖片切掉可以透過把圖調扁來讓他顯示
  4. chl=%E7%94%B7|%E5%A5%B3 是指 pie chart label, 用 | 隔開, 各項資料的名稱,以 | 分隔.其中比較需要讓大家理解的是 %E7%94%B7 是 utf-8 編碼的 "男", 另外就是 "女".
  5. 這樣的結果就會繪製出來上面的圖表了, 而且是即時繪製出來的哦,

假設調整一下多加一個不明的資料, 如下:
http://chart.apis.google.com/chart?
cht=p3&chd=t:19,78,3&chs=320x120&chl=%E7%94%B7|%E5%A5%B3|%E4%B8%8D%E6%98%8E


繪出結果如下:


改一下圖表型態, 可以變為長條圖:

http://chart.apis.google.com/chart?
ht=bvs&chd=t:49,48,3&chs=320x120&chl=%E7%94%B7%7C%E5%A5%B3%7C%E4%B8%8D%E6%98%8E
如下:
根據本部分參考網站(1.)提醒要注意地方:
"在繪製 pie chart 時,有可能因為 chart size 的關係,導致 label 會沒地方繪製出來."

提出的優點:
"請大家多多利用囉.尤其是不用撰寫一行程式,只要會組合 url 的參數,就可以取得的圖表工具, 真的是方便又好用咧."

本部分參考資料:



[6] chart type 可用圖表類型

本部分列出了所有可用的圖表類型與谷歌圖的API chart type 。


Bar Charts長條圖 (方向參數:bhs, bvs, bhg, bvg,bvo)
Bar ChartBar ChartBar ChartBar ChartVertical overlapping bar chart


Box Charts箱型圖(股票圖)
Box chart


Candlestick Charts蠟燭台圖(股票圖)
Candlestick chart


Compound Charts混合圖
Compound ChartsLine chart with one orange line and four financial markers.


Dynamic Icons 動態圖標/標記圖(chem)
Same dynamic icon marker as standalone image. Large bubble with text only.


Formulas 方程式(tx)



Google-O-Meter
Charts
谷歌-O型電表圖/度量表圖/儀表圖(gom)

Google-o-meter with rainbow coloring


GraphViz
Charts (Experimental)
樹與節點圖/圖形化關係圖(gv)

dot chart


Line Charts折線圖 (lc, ls, lxy)
Chart with line in yellow Sparkline chart in blue


Map Charts地圖/著色地圖 (t)
Map of Africa


Pie Charts圓餅圖 (p, p3, pc)



QR Codes二維條碼(全名是Quick Response Code,快速反應的二維條碼)
(qr)




Radar Charts雷達圖/多構面綜合指標圖 (r, rs)



Scatter Charts泡泡圖/散佈圖 (s)



Venn Charts 偉恩圖/文氏圖/貝氏集合圖(v)



本部分參考資料:
  1. Google Chart Tools / Image Charts (aka Chart API)
  2. Google Chart API 參考中文版
翻譯: Cloudream英文版版權歸Google ,轉載此中文版必須以鏈接形式註明原文地址、譯者信 息及本聲明。API參考:http://labs.cloudream.name/google/chart/api.html常見問題: http://labs.cloudream.name/google/chart/faq.html



[7]不可思議圖....




本部分參考資料:

  1. Chart Feature List




[8]Live Chart Playground 線上Chart圖表產生器

說明:

該網址提供一種快速和容易的方法來測試您的圖表URL網址。您可以將網址貼到URL文字框中,編輯參數。圖表和兩個文字框中鍵入時會立即更新。

提示:
  1. 換行時沒有縮排就會自動當成“&”串接網址。
  2. 換行縮排會使用“|”串接網址。
  3. 點擊 "Reformat Parameters" “格式化參數”會自動整理縮排和格式參數,以便於編輯。
  4. 參數都自動完成對映字串(chxt)及參數合理的對上名稱(“圖表標題”),作為你的圖表類型。
  5. 如果使用特殊字符、正體中文或繁體中文在您的標籤文字中(如文字+符號),你必須參考 [4]使用注意事項。

線上Chart圖表產生器
http://code.google.com/intl/zh-TW/apis/chart/docs/chart_playground.html

本部分參考資料:



[9]Formulas 方程式產生使用Chart API和Google Docs

http://docs.google.com/

1.開啟Google Docs
2.產生新文件
3.insert(插入)
4.Equation(方程式)


5.編輯(點選你想要的並編輯)
6.在即時產生的方程式圖片上按右鍵.你可以另存或取得圖片網址
7.網址可以貼到部落格上

例:
https://www.google.com/chart?cht=tx&chf=bg,s,FFFFFF00&chco=000000&chl=%5Csum_%7B5%7D%5E%7B20%7D%7B4*6%5Csqrt%5B3%5D%7B8%7D%20%7D%20%5CDelta%20%5Ctheta%20

本部分參考資料:
  1. http://docs.google.com/

  2. 使用Google Chart API繪製方程式
  3. 自己


熱門文章