android平台上展示图表信息

本文原创，转载请注明出处，谢谢！

本文谈一谈如何在android上展示出漂亮的图表，用以描述信息。

笔者使用的一种方法是：

android上使用WebView控件，在WebView控件上放一个html，在html上利用ichartjs图形库展示web形式的图表。

下面具体讲讲使用过程：

1. 首先介绍一下ichartjs图形库：

ichartjs是一款基于HTML5的图形库，使用纯js语言，利用HTML5的canvas标签绘制各式图形。icharjs致力于为WEB应用提供简单、直观、可交互的体验级图标组件，是WEB图表展示的解决方案。更多细节的使用大家可以上官网（http://www.ichartjs.com/）查看，它很适用于应用具有多平台，多终端的WEB应用，并且适用于iPhone与Android的手机平台。下面是从官网上找的2张效果截图（作者是taylor），你也可以做出来！

2. Android 2.3.3 上实测：

需要在AndroidManifest.xml里声明如下语句：

     <uses-permission android:name="android.permission.INTERNET" /> 

在项目assets目录中创建分类的文件夹，依据个人喜好设置分类，笔者设置如下：

在需要展示图表的Activity中声明WebView控件，并设置WebView相应的属性：

		//加载HTML页面，可以本地，可以远程
		wb.loadUrl("file:///android_asset/analyse/html/demo1.html");
		//这样在demo1.html页面中的js就可以与myObj对象进行交互
		wb.addJavascriptInterface(new MyObject(this), "myObj");
		//获取WebView的设置对象
		WebSettings webSettings=wb.getSettings();	
		//设置开启js调用
		webSettings.setJavaScriptEnabled(true);

MyObject就是一个POJO，开发者可以根据业务需要提供任意多的方法，比如可以设置一些字段，把它们当做参数给js，可以暴露一些方法供js调用等等。

笔者向js传递json格式的数据：

	JSONArray jsonArray;
	JSONObject object;

	public String getJson() {
		object=new JSONObject();
		try {
			object.put("days", jsonArray);
			
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return object.toString();
	}	

	private void setJsonArray() {
		JSONObject map1 = new JSONObject();
		JSONObject map2 = new JSONObject();
		JSONObject map3 = new JSONObject();
		try {
			map1.put("time", "第一周");
			map2.put("time", "第二周");
			map3.put("time", "第三周");			
			jsonArray = new JSONArray();
			jsonArray.put(map1);
			jsonArray.put(map2);
			jsonArray.put(map3);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

即把jsonobject传递给js，在js代码中便可以使用了：

		var jsonResult = JSON.parse(window.myObj.getJson());
		var labels = [];
		for ( var i = 0; i < jsonResult.days.length; i++) {
			labels.push(jsonResult.days[i].time);
		}

最后利用java代码传来的数据再利用ichartjs提供的工具就可以做出漂亮的图表显示在android设备中了！