随着移动设备的日益增多,以前互联网的一些常用功能逐渐在移动互联网上逐渐迁移 今天我们看一下我们经常用到的报表是怎样实现在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还要做很多配置 具体设置看下面代码
wv = (WebView) findViewById(R.id.wv);
wv.getSettings().setJavaScriptEnabled(true); //设置WebView支持javascript
wv.getSettings().setUseWideViewPort(true); //设置是当前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调用,下次再进行详细介绍吧
代码例子下载地址 ichartjstest
ichartjs用户使用手册下载 使用手册下载
分享到:
相关推荐
android报表解决方案 使用ichartjs开源项目
本文是自己根据实践总结的在AndroidStudio中引用其他开源组件的方法,图文并茂,亲测有效~
AndroidUI解决方案QMUIAndroid开源.docx
产品开源组件清单
解决方案:使用PDI构建开源ETL解决方案-460页.pdf
开源报表打印组件JasperReports用法详解,开源报表打印组件JasperReports用法详解,开源报表打印组件JasperReports用法详解
Kettle解决方案:使用PDI构建开源ETL解决方案 kettle介绍,使用,内容完善,是哥非常不错的内容
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
还有简单的密码验证 开发软件:Android StudioAndroid 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器Android 开源在线音乐播放器...
解决方案:使用PDI构建开源ETL解决方案源码示例,书中PDI示例和SQL
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
android报表解决方案 使用ichartjs开源项目
在android上使用HTML5实现几种常见图表的类库,基于开源项目ichartjs,刚开始写,还有许多需要添加的,我会慢慢再加,大家先试试,欢迎提意见。
Pentaho Kettle解决方案 使用PDI构建开源ETL解决方案,分享给所有需要的人!
《Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案》介绍的PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。 除了ODS/DW...
解决方案:使用PDI构建开源ETL解决方案.pdf 完整中文版,带目录,460页
是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
【资源情况】PDF文件大小为113 MB,共487页,清晰度尚可。...【资源介绍】PDI(Kettle)是一种开源的 ETL 解决方案,书中介绍了如何使用PDI来实现数据的剖析、清洗、校验、抽取、转换、加载等各类常见的ETL类工作。