Android报表解决方案 使用开源组件iChartjs（二）
16lz
2021-01-26
动态刷新图标数据
上次介绍了如何在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就实现了数据的更新
很轻松就实现了数据的刷新 来看效果图demo代码已经上传到CSDN 可以下载 ichartjstest demo
更多相关文章
- 一句话锁定MySQL数据占用元凶
- Android下的微博（新浪）-->第一步获取未授权的Request Token
- Unity3D 游戏引擎之游戏场景的切换与持久化简单数据的储存（十四）
- Android：Service生命周期方法与Service启动方式bindService与Star
- Android之权限问题
- Android(安卓)Canvas练习(7)绘制欧冠八强防守&控制率数据对比图
- Android(安卓)图片压缩策略详解，有效解决 Android(安卓)程序 OOM
- android 自定义View(一) View的事件分发与绘制
- 电脑怎么安装安卓系统？安卓(Android)x86 4.4安装方法图文步骤