使用ichartjs生成报表以及和activity交互！-CSDN博客

本文链接：https://blog.csdn.net/superharder/article/details/39989163

ichartjs是一款轻量级的图表工具，使用方便。

首先把需要的文件放入assets文件夹下。ichart-1.0.js，ichart-1.0.min.js。zhuzhuang_chart.html。

zhuzhuang_chart.html为要显示的页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs</title>
		<script type="text/javascript" src="ichart-1.0.min.js"></script>
		<script type="text/javascript">
		<span style="color:#ff6666;">var chart;
		var data = new Array();  
        <span style="white-space:pre">	</span>var contact = window.android.getModels(); 
       <span style="white-space:pre">	</span> <span style="white-space:pre">	</span>eval('data='+contact);   
        <span style="white-space:pre">	</span>var va = eval('('+window.android.getPreference()+')');</span>
		$(function(){
				new iChart.Bar2D({
					render : 'canvasDiv',
					data: data,<span style="white-space:pre">	</span>//动态加载数据
					turn_off_touchmove:true,
					title : {
						text:va.size*30,
						color:va.color
					},
					width : 500,
					height : va.size*30+160,  // 动态改变图表的高度
					offsetx:20,
					coordinate:{
						width:500,
						height:va.size*30, <span style="font-family: Arial, Helvetica, sans-serif;">// 动态改变图表的高度</span>
						grid_color:'#4e5464',
						axis:{
							color:'#4e5464',
							width:[0,0,8,1]
						},
						scale:[{
							 position:'bottom',	
							 start_scale:0,
							 end_scale:40,
							 scale_space:5,
							 label:{color:'#ffffff'},
							 listeners:{
								parseText:function(t,x,y){
									return {text:t}
								}
							 }
						}]
					},
					label:{color:'#dcdcdc'},
					background_color : '#3c4251',
					sub_option:{
						listeners:{
							parseText:function(r,t){
								return t;
							}
						}
					},
					legend:{enable:false}
				}).draw();
			});
			</script>
		</head>
		<body>
			<div id='canvasDiv'></div>
		</body>
</html>

各个属性的用法可以去查看ichartjs官网，这里就不在累赘了。

之后设置webView控件，因为需要使用webView控件进行显示。设置如下：

wv.getSettings().setJavaScriptEnabled(true); //设置支持javascript显示

wv.getSettings().setBuiltInZoomControls(true); //设置可以进行缩放
wv.addJavascriptInterface(this,"android"); //设置javascript和activity交互的接口，这里设置为本activity。

交互方法为：

@JavascriptInterface
	public String getModels()
	{
		String Json = null;
		try
		{
			JSONArray array = new JSONArray();
			for(DeviceMobile moblie:listDevice)
			{
				JSONObject object = new JSONObject();
				object.put("name", moblie.getName());
				object.put("value", moblie.getCount());
				object.put("color", "#b5bcc5");
				array.put(object);
			}
			Json =  array.toString();
		}
		catch(JSONException e)
		{
			e.printStackTrace();
		}
		return Json;
	}
	
	@JavascriptInterface
	public String getPreference()
	{
		JSONObject jsonOb =  new JSONObject();
		try
		{
			String title = station.getText().toString();
			jsonOb.put("text", title+"资源统计");
			jsonOb.put("color", "#b5bcc5");
			jsonOb.put("size", listDevice.size());
		}
		catch(JSONException e)
		{
			e.printStackTrace();
		}
		
		return jsonOb.toString();
		
	}

注意到：

@JavascriptInterface

为了系统的安全，在android4.2之后如果不加上就不能调用activity中的方法。

可能你已经发现到了这里注册了两个方法，返回的类型不一样，一个为Json数组形式，一个味json形式。

而且在js中使用的也不一样。

调用方法都是window.android.XXX();形式调用。

数组对象为：

先创建数组类型变量。

获取activity之中的数据。

使用eval()进行解析赋值。

<span style="color: rgb(255, 102, 102);">var data = new Array();  
var contact = window.android.getModels(); 
eval('data='+contact);</span>

非数组对象为：

<span style="color: rgb(255, 102, 102);">var va = eval('('+window.android.getPreference()+')'); </span>

通过eval()解析数据，并且返回变量，变量可以通过 va.XX 获取属性。