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用戶使用手冊下載使用手冊下載