[置顶] 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图

这个图表需要多值数据源，和上一篇文章中的单一数据源的区别是android中需要打包的数据data不同，而且还需提供一个相应的data_labels数据。

先把做出来的效果图贴出来：

1、android主界面代码：

package com.sq.Htmldemo;

import java.util.Vector;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {
	private WebView web;
	private WebSettings webSettings;
	private Vector<Item> chart = new Vector<Item>();
	private Parameter parameter = new Parameter(950, 450, "通信");
	private String data;
	private String data_labels;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
//        this.initContact();
        this.initContacts();
        
        web = (WebView)findViewById(R.id.web);
        webSettings = web.getSettings();
        webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
        webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
        web.addJavascriptInterface(this, "mainActivity");
        
//        web.loadUrl("file:///android_asset/Column3D.html");
//        data = PackageChartData.PackageData(chart);
        
        web.loadUrl("file:///android_asset/Area2D.html");
        data = PackageChartData.PackageDoubleData(chart);
        data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});
        
        Log.i("test", "data:"+data);
        Log.i("test", "data_labels:"+data_labels);
    }

    /**
     * 初始化图标要显示的内容，存放在chart中,单一数据类型的
     */
    public void initContact() {
    	Item item = new Item();
    	item.setName("移动");
    	item.setValue(40);
    	item.setColor("#bc6666");
    	chart.add(item);
    	Item item1 = new Item();
    	item1.setName("联通");
    	item1.setColor("#6f83a5");
    	item1.setValue(20);
    	chart.add(item1);
    	Item item2 = new Item();
    	item2.setName("电信");
    	item2.setColor("#76a871");
    	item2.setValue(30);
    	chart.add(item2);
    }
    
    /**
     * 初始化图标要显示的内容，存放在chart中,多值数据类型的
     */
    public void initContacts() {
    	Item item = new Item();
    	item.setName("上海");
    	item.setValues(new double[]{4,16,18,24,32,36,38,38,36,26,20,14});
    	item.setColor("#dad81f");
    	chart.add(item);
    	Item item1 = new Item();
    	item1.setName("北京");
    	item1.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});
    	item1.setColor("#1f7e92");
    	chart.add(item1);
    }
    
    /**
     * 该方法将在js脚本中，通过window.mainActivity.getContact()进行调用,得到图表显示所需的JSON格式的data
     * @return
     */
    public String getContact(){
    	Log.i("test", "get data:"+data);
    	return data;
    }
    
    /**
     * 该方法将在js脚本中，通过window.mainActivity.getContactLabels()进行调用,得到图表显示所需的JSON格式的data_labels
     * @return
     */
    public String getContactLabels() {
    	Log.i("test", "get data_labels:"+data_labels);
    	return data_labels;
	}
    
    /**
     * 该方法将在js脚本中，通过window.mainActivity.getContacts()进行调用
     * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组
     * @return
     */
    public JavaArrayJSWrapper getContacts(){
    	Log.i("test", "getContacts execute!");
    	Item[] contacts = new Item[this.chart.size()];
    	contacts = this.chart.toArray(contacts);
    	return new JavaArrayJSWrapper(contacts);
    }
    
    /**
     * 该方法将在js脚本中，通过window.mainActivity.getWidth()进行调用
     * 得到图表的宽度
     * @return int
     */
    public int getWidth(){
    	return parameter.getWidth();
    }
    
    /**
     * 该方法将在js脚本中，通过window.mainActivity.getHeight()进行调用
     * 得到图表的高度
     * @return int
     */
    public int getHeight(){
    	return parameter.getHeight();
    }
    
    public String getChartTitle(){
    	return parameter.getTitle();
    }
    
    /**
     * 用于调试的方法，该方法将在js脚本中，通过window.mainActivity.debugOut(“”)进行调用
     * @param out
     */
    public void debugOut(String out) {
		// TODO Auto-generated method stub
    	Log.i("test", "debugOut:" + out);
	}
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

2、AreaD.html文件源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>多数据源的面积图</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<script type="text/javascript" src="ichart-1.0.beta.min.js"></script>
		<script type="text/javascript" >
		    $(function(){	
		    	var data = new Array();
		        var data_labels = new Array();
				var contact = window.mainActivity.getContact();
				var contact_lab = window.mainActivity.getContactLabels();
				eval('data='+contact);
				window.mainActivity.debugOut("data="+data); 
				eval('data_labels='+window.mainActivity.getContactLabels());
				window.mainActivity.debugOut("data_labels="+data_labels); 
				
				new iChart.Area2D({
					render : 'canvasDiv',
					data: data,
					title : 'Average Temperature Of 2012',
					width : 800,
					height : 400,
					legend : {
						enable : true
					},
					tip:{
						enable : true
					},
					listeners:{
						parseTipText:function(d,t,i){
							return 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>

3、用于将data打包JSON格式的PackageChartData类：

package com.sq.Htmldemo;

import java.util.Vector;
import org.json.JSONArray;
import org.json.JSONObject;

public class PackageChartData {
	
	/**
	 * 将单一数据源打包成JSON格式
	 * @param chartData 存储单一数据源的数组
	 * @return
	 */
	public static String PackageData(Vector<Item> 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);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return root.toString();
	}
	
	/**
	 * 将多值数据源打包成JSON格式
	 * @param chartData
	 * @return
	 */
	public static String PackageDoubleData(Vector<Item> 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 (Exception e) {
			e.printStackTrace();
		}
		return root.toString();
	}
	
	/**
	 * 将多值数据源相应的data_labels打包成JSON格式
	 * @param dataLabels
	 * @return
	 */
	public static String PackageDataLabels(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 root.toString();
	}
}