======轉自http://blog.csdn.net/wanglong0537/article/details/8446792=======
隨着移動設備的日益增多，以前互聯網的一些常用功能逐漸在移動互聯網上逐漸遷移 今天我們看一下我們經常用到的報表是怎樣實現在android客戶端的
接觸過android圖標的人應該都知道Achartengine 一個android應用的圖表庫 利用android本地的API來進行圖標的繪製 適用於數據分析，報表顯示，也涵蓋了一些常用的圖標，是個易學易用的圖表庫，但是他的實現的效果有侷限性，交互性不強
可以看下實現的效果 ：
移動設備目前已經完美支持HTML5 今天介紹一下利用html5開發本地化的報表
使用的開源報表類庫iCharjs ，國內開源小組開發 有詳細的中英文API文檔以及實例代碼 這裏不作太多介紹 可以去官方網站詳細瞭解 http://www.ichartjs.com/
下面介紹使用ichartjs開發本地化報表
首先在官網下載ichartjs類庫包 ichart-1.0.js
新建android項目ichartjstest
在assets目錄下放置報表文件 報表基於HTML 所以要創建html文件 如下圖 目錄結構根據項目要求可以自己定義
html中創建圖表代碼如下：
- <html>
- <head>
- <meta charset="UTF-8" />
- <script type="text/javascript" src="ichart-1.0.min.js"></script>
- <script type="text/javascript">
- $(function(){
- var data = [
- {
- name : '北京',
- value:[2,12,14,20,28,32,34,36,33,24,14,4],
- color:'#1f7e92'
- }
- ];
- var chart = new iChart.Area2D({
- render : 'canvasDiv',
- data: data,
- turn_off_touchmove:true,
- title : '北京2012年平均溫度情況',
- width : 800,
- height : 400,
- labels:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
- });
- chart.draw();
- });
- </script>
- </head>
- <body>
- <div id='canvasDiv'></div>
- </body>
- </html>
html文件創建過程這裏參考ichartjs教程
創建後就要在activity中顯示該圖表了 android中可以通過WebView來顯示
layout文件很簡單 只需要添加WebView標籤就可以
- <WebView
- android:id="@+id/wv"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- />
當然WebView還要做很多配置 具體設置看下面代碼
- <span style="white-space:pre"> </span>wv = (WebView) findViewById(R.id.wv);
- wv.getSettings().setJavaScriptEnabled(true); //設置WebView支持javascript
- wv.getSettings().setUseWideViewPort(true);<span style="white-space:pre"> </span>//設置是當前html界面自適應屏幕
- wv.getSettings().setSupportZoom(true); //設置支持縮放
- wv.getSettings().setBuiltInZoomControls(true);//顯示縮放控件
- wv.getSettings().setLoadWithOverviewMode(true);
- wv.requestFocus();
- wv.loadUrl("file:///android_asset/mianji_chart.html"); //加載assert目錄下的文件
這樣可以顯示報表了
效果像上圖一樣 可以進行縮放、拖動等操作，ichartjs支持點擊、觸摸等交互 所以會消化掉android屏幕的touchmove事件 導致圖表不能夠拖動
這裏需要增加屬性 turn_off_touchmove:true 來去掉事件 就可以正常拖動了
OK 大功告成 是不是很簡單，當然這裏只是實現了本地化的數據加載 如果需要根據查詢數據進行圖標展示 ，這裏就要進行服務器數據查詢，然後根據數據來展示圖表，這個也是可以實現的，需要通過js調用，下次再進行詳細介紹吧