动态刷新图标数据
上次介绍了如何在android设备上利用ichartjs来轻松构建图表,很简单就可以让你的手机上展示丰富的报表数据信息,但是实际应用中这些数据是会不断刷新或者是实时刷新的,图表中的数据都是动态获取的。
今天我们介绍如何让本地报表动起来 实现数据刷新
要做到这个也很简单就是通过webView的api来实现javascript调用动态传递数据来更新图表,下面来看具体实现:
接着在上次的项目基础上增加功能,
这里是需要在java代码中调用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就实现了数据的更新
很轻松就实现了数据的刷新 来看效果图
分享到:
相关推荐
android报表解决方案 使用ichartjs开源项目
本文是自己根据实践总结的在AndroidStudio中引用其他开源组件的方法,图文并茂,亲测有效~
AndroidUI解决方案QMUIAndroid开源.docx
产品开源组件清单
解决方案:使用PDI构建开源ETL解决方案-460页.pdf
Kettle解决方案:使用PDI构建开源ETL解决方案 kettle介绍,使用,内容完善,是哥非常不错的内容
还有简单的密码验证 开发软件:Android StudioAndroid 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器...
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》主要介绍如何使用开源ETL工具来完成数据整合工作。 《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案...
解决方案:使用PDI构建开源ETL解决方案源码示例,书中PDI示例和SQL
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
android报表解决方案 使用ichartjs开源项目
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
在android上使用HTML5实现几种常见图表的类库,基于开源项目ichartjs,刚开始写,还有许多需要添加的,我会慢慢再加,大家先试试,欢迎提意见。
Pentaho Kettle解决方案 使用PDI构建开源ETL解决方案,分享给所有需要的人!
解决方案:使用PDI构建开源ETL解决方案.pdf 完整中文版,带目录,460页
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
开源报表打印组件JasperReports用法详解,开源报表打印组件JasperReports用法详解,开源报表打印组件JasperReports用法详解
是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
【资源情况】PDF文件大小为113 MB,共487页,清晰度尚可。...【资源介绍】PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。
负载均衡开源解决方案 ppt文档 讲解很详细