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

时间 2019-11-17

标签 android 报表解决方案使用开源组件 ichartjs 栏目 Android 繁體版

原文原文链接

随着移动设备的日益增多，之前互联网的一些经常使用功能逐渐在移动互联网上逐渐迁移今天咱们看一下咱们常常用到的报表是怎样实如今android客户端的 javascript

接触过android图标的人应该都知道Achartengine 一个android应用的图表库利用android本地的API来进行图标的绘制适用于数据分析，报表显示，也涵盖了一些经常使用的图标，是个易学易用的图表库，可是他的实现的效果有局限性，交互性不强 html

能够看下实现的效果： html5

移动设备目前已经完美支持HTML5 今天介绍一下利用html5开发本地化的报表 java

使用的开源报表类库iCharjs ，国内开源小组开发有详细的中英文API文档以及实例代码这里不做太多介绍能够去官方网站详细了解 http://www.ichartjs.com/ android

下面介绍使用ichartjs开发本地化报表 canvas

首先在官网下载ichartjs类库包 ichart-1.0.js 服务器

新建android项目ichartjstest ide

在assets目录下放置报表文件报表基于HTML 因此要建立html文件以下图目录结构根据项目要求能够本身定义网站

html中建立图表代码以下： ui


 
 
 
<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还要作不少配置具体设置看下面代码

<SPAN style="WHITE-SPACE: pre">		</SPAN>wv = (WebView) findViewById(R.id.wv);
		wv.getSettings().setJavaScriptEnabled(true);  //设置WebView支持javascript
		wv.getSettings().setUseWideViewPort(true);<SPAN style="WHITE-SPACE: pre">	</SPAN>//设置是当前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（一）

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