Android使用ichartjs在HTML5中动态绘制图表

HTML5是未来移动app开发的重头戏，其中利用HTML5动态绘制图表是一个很重要的应用。本实例就是在Android中利用ichartjs在HTML5中动态绘制图表。绘制图表所需的数据以及图表的标题和属性都是通过程序动态写入html页面的。

程序主文件：

package com.example.mycharttest;

import java.util.Vector;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MyChartActivity extends Activity {

	private WebView web;
	
	private String chart_data_json,data_labels;
	
	private Vector<ChartData> chart_data = new Vector<ChartData>();
	ChartParameter chartparameter = new ChartParameter();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
        initData();
        initparmeter();
        chart_data_json = JsonPram.LabelData(chart_data);
        data_labels = JsonPram.DataLabels(new String[]{"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"});
        
        System.out.println(chart_data_json);
        web = (WebView) this.findViewById(R.id.web);
        web.getSettings().setBuiltInZoomControls(true);
        web.getSettings().setJavaScriptEnabled(true);
        web.addJavascriptInterface(this, "chart_data_json");//与html的接口，传递图表中的数据
        web.addJavascriptInterface(chartparameter, "chart_parameter");//传递的是图表的标题、宽度和高度
        web.loadUrl("file:///android_asset/JS.html");
    }
    
    /**
     * 在JS.html中调用该函数，将chart_data_json的数值传过去
     * @return
     */
    public String getContacts() {
    	return chart_data_json;
    }
    
    /**
     * 传递横坐标的刻度值
     * @return
     */
    public String getDataLabels() {
    	return data_labels;
    }
    /**
     * 没用到，作用是在JS.html中调用，传递参数
     * @return
     */
    public JavaArrayJSWrapper getContact() {
    	ChartData[] a = new ChartData[this.chart_data.size()];
    	a = this.chart_data.toArray(a);
    	return new JavaArrayJSWrapper(a);
    }
    
    /**
     * 初始化图标的数据
     */
    public void initData() {
    
    	ChartData charttest = new ChartData();
    	charttest.setName("IE");
    	charttest.setValues(new double[]{4,16,18,20,32,36,38,38,36,26,20,14});
    	charttest.setColor("#a5c2d5");
    	chart_data.add(charttest);
    	
    	charttest = new ChartData();
    	charttest.setName("Chrome");
    	charttest.setValues(new double[]{1,12,18,20,28,34,36,34,31,27,24,6});
    	charttest.setColor("#cbab4f");
    	chart_data.add(charttest);
    	
    	charttest = new ChartData();
    	charttest.setName("Chrome");
    	charttest.setValues(new double[]{2,12,14,20,28,32,34,36,33,24,14,4});
    	charttest.setColor("#97b3bc");
    	chart_data.add(charttest);
    }
    
    /**
     * 初始化标题、宽度和高度
     */
    public void initparmeter() {	
    	chartparameter.setTitle("2012年平均气温");
    	chartparameter.setWidth(800);
    	chartparameter.setHeight(400);
    }
    
    public void debugout(String info) {
    	Log.i("TAG",info);
    	System.out.println(info);
    }
   
}

将传递的图表数据打包成JSON格式的类：

package com.example.mycharttest;

import java.util.Vector;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * 将vector的数据打包成JSON格式
 * @author CYL
 *
 */
public class JsonPram {
	public static String PackagePostData(Vector<ChartData> chartdata) {
		JSONArray root = new JSONArray();
		try{
			for(int i = 0; i < chartdata.size(); i++) {
				JSONObject temp = new JSONObject();
				temp.put("name", chartdata.get(i).getName());
				temp.put("value", chartdata.get(i).getValue());
				temp.put("color", chartdata.get(i).getColor());
				root.put(temp);	
				System.out.println(temp);
				
			}
		} catch (JSONException e) {
			e.printStackTrace();
			return null;
		}
		return root.toString();	
	}
	
	public static String LabelData(Vector<ChartData> chartdata) {
		JSONArray root = new JSONArray();
		try{
			for(int i = 0; i < chartdata.size(); i++) {
				JSONObject temp = new JSONObject();
				temp.put("name", chartdata.get(i).getName());
				JSONArray values = new JSONArray();

				for(int j = 0; j < chartdata.get(i).getValues().length; j++){
					values.put(chartdata.get(i).getValues()[j]);
				}
				temp.put("value", values);
				temp.put("color", chartdata.get(i).getColor());
				root.put(temp);
			}
		} catch(JSONException e) {
			e.printStackTrace();
			return null;
		}
		return root.toString();		
	}
	
	public static String DataLabels(String[] datalabels) {
		JSONArray root = new JSONArray();
		try{
			for(int i = 0; i < datalabels.length; i++) {
				root.put(datalabels[i]);
			}
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
		return root.toString();		
	}
}

导入的数据类：

package com.example.mycharttest;

public class ChartData {
	String name;
	double[] values;
	String color;
	
	public void setName(String name){
		this.name = name;
	}
	
	public String getName(){
		return name;
	}
	
	public void setValues(double[] values){
		this.values = values;
	}
	
	public double[] getValues(){
		return values;
	}

	public void setColor(String color){
		this.color = color;
	}
	
	public String getColor(){
		return color;
	}
}

导入的图表的属性类

package com.example.mycharttest;


public class ChartParameter {

	String title;
	int width, height;
	
	public void setTitle(String title) {
		this.title = title;
	}
	
	public String getTitle() {
		return title;
	}
	
	public void setWidth(int width) {
		this.width = width;
	}
	
	public int getWidth() {
		return width;
	}
	
	public void setHeight(int height) {
		this.height = height;
	}
	
	public int getHeight() {
		return height;
	}
}

JavaArrayJSWrapper.java

package com.example.mycharttest;

public class JavaArrayJSWrapper {

	private Object[] innerArray;
	
	public JavaArrayJSWrapper(Object[] a){
		this.innerArray = a;
	}
	
	public int length(){
		return this.innerArray.length;
	}
	
	public Object get(int index){
		return this.innerArray[index];
	}
}

布局文件main_activity.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/web"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </WebView>

</LinearLayout>

绘制图表的HTML，其中导入的ichart-1.0.min.js可以在http://www.ichartjs.cn/获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK" />
		<title>ichartjs</title>
		<meta http-equiv="keywords" content="ichartjs demo,Html5 demo,ichart demo"></meta>
		<meta http-equiv="description" content="The ichartjs's gallery center,ichartjs"></meta>
		<script type="text/javascript" src="ichart-1.0.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		
		<script type="text/javascript">
			
		$(function(){
			
			var data;
			var data_labels;
	        window.chart_data_json.debugout("inside js onload");
	        var chartDataJson = window.chart_data_json.getContacts();
	        var dataLabels = window.chart_data_json.getDataLabels();
	        window.chart_data_json.debugout(chartDataJson);
	        eval('data='+chartDataJson);//eval作用是将外部传进来的String数据作为本地js数据，并执行
	        eval('data_labels='+dataLabels);
	        
	        var chart_title = window.chart_parameter.getTitle();
	        window.chart_data_json.debugout(chart_title);
	        var chart_width = window.chart_parameter.getWidth();
	        window.chart_data_json.debugout(chart_width);
	        var chart_height = window.chart_parameter.getHeight();
	        window.chart_data_json.debugout(chart_height);
				
				new iChart.Area2D({
					render : 'canvasDiv',
					data: data,
					title : chart_title,
					width : chart_width,
					height : chart_height,
					area_opacity:0.15,
					legend : {
						enable : true
					},
					tip:{
						enable : true
					},
					listeners:{
						parseTipText:function(d,t,i){
							return d.name+data_labels[i]+"平均温度:"+t+"℃";
						}
					},
					coordinate:{
						scale:[{
							 position:'left',	
							 start_scale:0,
							 end_scale:40,
							 scale_space:5,
							 listeners:{
								parseText:function(t,x,y){
									return {text:t+"℃"}
								}
							}
						},{
							 position:'bottom',	
							 start_scale:1,
							 end_scale:12,
							 parseText:function(t,x,y){
								return {textY:y+10}
							 },
							 labels:data_labels
						}]
					}
				}).draw();
			
			});
		</script>
	</head>
	<body>
		<div id='canvasDiv'></div>
	</body>
</html>