Android報表解決方案 使用開源組件iChartjs（二）

動態刷新圖標數據

上次介紹瞭如何在android設備上利用ichartjs來輕鬆構建圖表，很簡單就可以讓你的手機上展示豐富的報表數據信息，但是實際應用中這些數據是會不斷刷新或者是實時刷新的，圖表中的數據都是動態獲取的。
今天我們介紹如何讓本地報表動起來 實現數據刷新

要做到這個也很簡單就是通過webView的api來實現javascript調用動態傳遞數據來更新圖表，下面來看具體實現：
接着在上次的項目基礎上增加功能，

這裏是需要在java代碼中調用javascript方法 首先需要開啓JavaScript支持  

wv.getSettings().setJavaScriptEnabled(true);

想要更新圖表，首先就要獲得數據  獲取數據的方式有很多 可以是通過android聯網獲取服務端的數據 可以是http 也可以是webservice ，也可以從android本地獲取數據，數據庫裏或者實時系統數據能夠獲取 ，拿到的數據無論什麼格式 json xml 對象 都沒問題 只要最終轉換成ichartjs所需要的數據就可以了
我這裏寫了個方法通過隨機數的方式模擬了獲取數據

//模擬獲取遠程數據 這裏可以是聯網到服務端獲取數據
    private String getRemoteData(){
         try {
                JSONObject object1 = new JSONObject();
                object1.put("name", "北京");
                object1.put("color", "#1f7e92");
                Random random = new Random();
                //js中的數組類型要使用JSONArray對象
                JSONArray jadata= new JSONArray();
                for(int i=0;i<12;i++){
                    jadata.put(random.nextInt(40));
                }
                object1.put("value", jadata);
                JSONArray jsonArray = new JSONArray();
                jsonArray.put(object1);
                return jsonArray.toString();
            } catch (JSONException e) {
                e.printStackTrace();
            }
            return null;
    }

或者是

//模擬獲取遠程數據 這裏可以是聯網到服務端獲取數據
    private String getRemoteData(){
         try {
                Random random = new Random();
                JSONObject object1 = new JSONObject();
                object1.put("name", "Renren");
                object1.put("color", "#b5bcc5");
                object1.put("value", random.nextInt(40));
                JSONObject object2 = new JSONObject();
                object2.put("name", "Facebook");
                object2.put("color", "#b5bcc5");
                object2.put("value", random.nextInt(40));
                JSONObject object3 = new JSONObject();
                object3.put("name", "StumbleUpon");
                object3.put("color", "#b5bcc5");
                object3.put("value", random.nextInt(40));
                JSONObject object4 = new JSONObject();
                object4.put("name", "reddit");
                object4.put("color", "#b5bcc5");
                object4.put("value", random.nextInt(40));
                JSONObject object5 = new JSONObject();
                object5.put("name", "Hi5");
                object5.put("color", "#b5bcc5");
                object5.put("value", random.nextInt(40));
                JSONObject object6 = new JSONObject();
                object6.put("name", "LinkedIn");
                object6.put("color", "#b5bcc5");
                object6.put("value", random.nextInt(40));
                JSONObject object7 = new JSONObject();
                object7.put("name", "Twitter");
                object7.put("color", "#b5bcc5");
                object7.put("value", random.nextInt(40));
                JSONObject object8 = new JSONObject();
                object8.put("name", "Other");
                object8.put("color", "#b5bcc5");
                object8.put("value", random.nextInt(40));




                JSONArray jsonArray = new JSONArray();
                jsonArray.put(object1);
                jsonArray.put(object2);
                jsonArray.put(object3);
                jsonArray.put(object4);
                jsonArray.put(object5);
                jsonArray.put(object6);
                jsonArray.put(object7);
                jsonArray.put(object8);
                return jsonArray.toString();
            } catch (JSONException e) {
                e.printStackTrace();
            }
            return null;
    }

根據圖表數據的具體結構來組裝數據就可以了 通過 JSONObject和JSONArray 可以通過面向對象的方式組裝數據
需要注意的是 這裏組裝基本類型的數組時 一定要使用JSONArray 這樣得到的數據才能夠在javascript中解析出來 
數據得到了 下一步就是要在html的界面中來把數據更新到圖表中 
這裏我通過一個更新按鈕來觸發事件 獲取數據並更新 當然出發方式根據具體需求可以自己設置
觸發事件方法中可以通過java代碼調用javascript的方法來實現數據傳遞和更新 實現很簡單 具體操作如下

public void updateBtn(View view){
        wv.loadUrl("javascript:setContentInfo('"+getRemoteData()+"')");
    }

webView api裏的方法 這裏的作用是嗲用webview加載的html界面裏的setContentInfo方法 該方法傳遞一個參數 數據類型爲String
那麼html裏的方法是怎麼實現的呢  看下面代碼

function setContentInfo(data)  {
                var jsonObjects = eval(data);   //通過eval方法處理得到json對象數組
                chart.push("data",jsonObjects);
                chart.setUp();
                chart.draw();
            }

把傳遞過來的string轉換成jsonObject對象 再利用ichartjs的API就實現了數據的更新 

很輕鬆就實現了數據的刷新 來看效果圖