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

最新推荐文章于 2021-05-27 15:07:20 发布

wanglong0537

最新推荐文章于 2021-05-27 15:07:20 发布

阅读量1.4w

点赞数 4

分类专栏： html5 文章标签： android Android ANDROID html5 HTML5 Html5 ichartjs iChartjs 开源报表工具报表

本文链接：https://blog.csdn.net/wanglong0537/article/details/8446792

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

随着移动设备的日益增多，以前互联网的一些常用功能逐渐在移动互联网上逐渐迁移今天我们看一下我们经常用到的报表是怎样实现在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目录下的文件

这样可以显示报表了