Android报表解决方案 使用开源组件iChartjs（二）

动态刷新图标数据

上次介绍了如何在android设备上利用ichartjs来轻松构建图表，很简单就可以让你的手机上展示丰富的报表数据信息，但是实际应用中这些数据是会不断刷新或者是实时刷新的，图表中的数据都是动态获取的。
今天我们介绍如何让本地报表动起来 实现数据刷新

要做到这个也很简单就是通过webView的api来实现javascript调用动态传递数据来更新图表，下面来看具体实现：
接着在上次的项目基础上增加功能，

这里是需要在java代码中调用javascript方法 首先需要开启JavaScript支持  

[java] view plaincopy

1. wv.getSettings().setJavaScriptEnabled(true);    

想要更新图表，首先就要获得数据  获取数据的方式有很多 可以是通过android联网获取服务端的数据 可以是http 也可以是webservice ，也可以从android本地获取数据，数据库里或者实时系统数据能够获取 ，拿到的数据无论什么格式 json xml 对象 都没问题 只要最终转换成ichartjs所需要的数据就可以了
我这里写了个方法通过随机数的方式模拟了获取数据

[java] view plaincopy

1. //模拟获取远程数据 这里可以是联网到服务端获取数据  
2.     private String getRemoteData(){  
3.          try {    
4.                 JSONObject object1 = new JSONObject();    
5.                 object1.put("name", "北京");    
6.                 object1.put("color", "#1f7e92");    
7.                 Random random = new Random();  
8.                 //js中的数组类型要使用JSONArray对象  
9.                 JSONArray jadata= new JSONArray();    
10.                 for(int i=0;i<12;i++){  
11.                     jadata.put(random.nextInt(40));  
12.                 }  
13.                 object1.put("value", jadata);      
14.                 JSONArray jsonArray = new JSONArray();    
15.                 jsonArray.put(object1);    
16.                 return jsonArray.toString();    
17.             } catch (JSONException e) {    
18.                 e.printStackTrace();    
19.             }    
20.             return null;    
21.     }  

或者是

[java] view plaincopy

1. //模拟获取远程数据 这里可以是联网到服务端获取数据  
2.     private String getRemoteData(){  
3.          try {    
4.                 Random random = new Random();  
5.                 JSONObject object1 = new JSONObject();    
6.                 object1.put("name", "Renren");    
7.                 object1.put("color", "#b5bcc5");    
8.                 object1.put("value", random.nextInt(40));    
9.                 JSONObject object2 = new JSONObject();    
10.                 object2.put("name", "Facebook");    
11.                 object2.put("color", "#b5bcc5");    
12.                 object2.put("value", random.nextInt(40));    
13.                 JSONObject object3 = new JSONObject();    
14.                 object3.put("name", "StumbleUpon");    
15.                 object3.put("color", "#b5bcc5");    
16.                 object3.put("value", random.nextInt(40));    
17.                 JSONObject object4 = new JSONObject();    
18.                 object4.put("name", "reddit");    
19.                 object4.put("color", "#b5bcc5");    
20.                 object4.put("value", random.nextInt(40));    
21.                 JSONObject object5 = new JSONObject();    
22.                 object5.put("name", "Hi5");    
23.                 object5.put("color", "#b5bcc5");    
24.                 object5.put("value", random.nextInt(40));    
25.                 JSONObject object6 = new JSONObject();    
26.                 object6.put("name", "LinkedIn");    
27.                 object6.put("color", "#b5bcc5");    
28.                 object6.put("value", random.nextInt(40));    
29.                 JSONObject object7 = new JSONObject();    
30.                 object7.put("name", "Twitter");    
31.                 object7.put("color", "#b5bcc5");    
32.                 object7.put("value", random.nextInt(40));    
33.                 JSONObject object8 = new JSONObject();    
34.                 object8.put("name", "Other");    
35.                 object8.put("color", "#b5bcc5");    
36.                 object8.put("value", random.nextInt(40));    
37.                   
38.                   
39.                   
40.                   
41.                 JSONArray jsonArray = new JSONArray();    
42.                 jsonArray.put(object1);    
43.                 jsonArray.put(object2);    
44.                 jsonArray.put(object3);    
45.                 jsonArray.put(object4);    
46.                 jsonArray.put(object5);    
47.                 jsonArray.put(object6);    
48.                 jsonArray.put(object7);    
49.                 jsonArray.put(object8);    
50.                 return jsonArray.toString();    
51.             } catch (JSONException e) {    
52.                 e.printStackTrace();    
53.             }    
54.             return null;    
55.     }  

根据图表数据的具体结构来组装数据就可以了 通过 JSONObject和JSONArray 可以通过面向对象的方式组装数据
需要注意的是 这里组装基本类型的数组时 一定要使用JSONArray 这样得到的数据才能够在javascript中解析出来 
数据得到了 下一步就是要在html的界面中来把数据更新到图表中 
这里我通过一个更新按钮来触发事件 获取数据并更新 当然出发方式根据具体需求可以自己设置
触发事件方法中可以通过java代码调用javascript的方法来实现数据传递和更新 实现很简单 具体操作如下

[java] view plaincopy

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

webView api里的方法 这里的作用是嗲用webview加载的html界面里的setContentInfo方法 该方法传递一个参数 数据类型为String
那么html里的方法是怎么实现的呢  看下面代码

[javascript] view plaincopy

1. function setContentInfo(data)  {    
2.                 var jsonObjects = eval(data);   //通过eval方法处理得到json对象数组    
3.                 chart.push("data",jsonObjects);  
4.                 chart.setUp();  
5.                 chart.draw();  
6.             }    

把传递过来的string转换成jsonObject对象 再利用ichartjs的API就实现了数据的更新 

很轻松就实现了数据的刷新 来看效果图