[Android 教學] Google 圖表工具

http://code.google.com/intl/zh-TW/apis/chart/

範例程式下載請按我

今天要介紹的是 Google Chart Tools 表格工具, 包含了長條圖, 雷達圖, 圓餅圖, 折線圖等等只要是圖表這邊都可以使用。可以在您的網站中嵌入或是Android app 中使用本項服務來得到各種精美的表格。

本範例修改自 [Google Android SDK開發範例大全｜第3版] 範例0903, 會將輸入字串送給Google Chart Tools 之後回傳正確的QRCode。

問題來了, 這些參數說真的不是太好懂, 所以可以使用圖表精靈 Chart Wizard(http://code.google.com/intl/zh-TW/apis/chart/image/docs/chart_wizard.html), 它真的超好用的!  只要了解基本的參數設定, 人人都可以做出超精美的表格~

舉例來說, 我想要產生一張雷達圖, 我只要點選進入雷達圖選項之後, 調整參數, 然後把以下參數貼到Android程式中就可以了。事實上browser會自動辨識 < img >標籤把它變成一張圖, 所以我們刪除標籤只留下內文。

“http://chart.apis.google.com/chart?chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chxt=x,y&chs=300×300&cht=r&chco=FF0000&chd=t:63,64,67,73,77,81,85,86,85,81,74,67,63&chls=2,4,0&chm=B,FF000080,0,0,0”

以上比較重要的參數有 chxl 是分類項目名稱(Jan~Dec)。chs是圖表尺寸, chd是各分類項目值。所以Jan的值是63, Feb是64…  以此類推到Dec是63。

在Android中, 我們可以透過 WebView.loadData()方法來將回傳結果顯示在螢幕上。

範例程式下載請按我

請注意本範例只示範Android app 去載入不同的Google Chart Tools 參數, 所以範例程式中不論輸入什麼所載回來的圖型都是一樣的唷! 如果需要在app端自行輸入參數來調整的話, 您需要使用EditText.getText().toString() 來取得 輸入欄位中的資訊, 再指定到對應的 Google Chart Tools參數中。