ichartjs是一款基于HTML5的图形库。使用纯javascript语言，利用HTML5的canvas标签绘制各式图形。ichartjs可以为web应用提供简单、直观、可交互的体验级图表组件。是web图表方面的解决方案。最近正好在学HTML5，顺便就用ichartjs来练习。ichartjs目前支持饼图、折线图、区域图、柱形图、条形图。ichartjs是基于Apache License 2.0 协议的开源项目。今天介绍的是如何在android手机上动态实现3D柱形图。若想详细了解ichartjs，可以访问ichartjs官网：http://www.ichartjs.cn/index.html

实现主要原理是所需实现的数据打包成json格式，因为ichartjs规定的数据源统一采用json对象方式。数据源分为单一数据源与集合多值数据源，单一数据源的值为单一的数值，而集合多值数据源为数值集合。3D柱形图使用的单一的数据源。废话不多说了，直接上代码。

首先编写的是封装数据的实体类Contact：

packagecom.chinasofti.html;

publicclassContact {

privateString name;// 浏览器的名称

privatedoublevalue;// 浏览器对应的所占市场份额值

privateString color;// 在柱形图中所显示的颜色

/**

* 构造函数

* @param name 浏览器的名称

* @param value 浏览器对应的所占市场份额值

* @param color 在柱形图中所显示的颜色

*/

publicContact(String name,doublevalue, String color) {

this.name = name;

this.value = value;

this.color = color;

}

// 下面是三个实例变量的getters and setters

publicString getName() {

returnname;

}

publicvoidsetName(String name) {

this.name = name;

}

publicdoublegetValue() {

returnvalue;

}

publicvoidsetValue(doublevalue) {

this.value = value;

}

publicString getColor() {

returncolor;

}

publicvoidsetColor(String color) {

this.color = color;

}

}package com.chinasofti.html;

public class Contact {

private String name; // 浏览器的名称

private double value; // 浏览器对应的所占市场份额值

private String color; // 在柱形图中所显示的颜色

/**

* 构造函数

* @param name 浏览器的名称

* @param value 浏览器对应的所占市场份额值

* @param color 在柱形图中所显示的颜色

*/

public Contact(String name, double value, String color) {

this.name = name;

this.value = value;

this.color = color;

}

// 下面是三个实例变量的getters and setters

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public double getValue() {

return value;

}

public void setValue(double value) {

this.value = value;

}

public String getColor() {

return color;

}

public void setColor(String color) {

this.color = color;

}

}

接着创建一个list将所需要的contact对象添加到list中：

importjava.util.ArrayList;

importjava.util.List;

importcom.chinasofti.html.Contact;

publicclassContactService {

publicList getContacts() {

List contacts =newArrayList();

contacts.add(newContact("IE",32.85,"#a5c2d5"));

contacts.add(newContact("Chrome",33.59,"#cbab4f"));

contacts.add(newContact("Firefox",22.85,"#76a871"));

contacts.add(newContact("Safari",7.39,"#9f7961"));

contacts.add(newContact("Opera",1.63,"#a56f8f"));

contacts.add(newContact("Other",1.69,"#6f83a5"));

returncontacts;

}

}import java.util.ArrayList;

import java.util.List;

import com.chinasofti.html.Contact;

public class ContactService {

public List getContacts() {

List contacts = new ArrayList();

contacts.add(new Contact("IE", 32.85, "#a5c2d5"));

contacts.add(new Contact("Chrome", 33.59, "#cbab4f"));

contacts.add(new Contact("Firefox", 22.85, "#76a871"));

contacts.add(new Contact("Safari", 7.39, "#9f7961"));

contacts.add(new Contact("Opera", 1.63, "#a56f8f"));

contacts.add(new Contact("Other", 1.69, "#6f83a5"));

return contacts;

}

}

然后编写android主界面代码，实现list转换成json格式字符串，并实现和html文件的交互：

importjava.util.List;

importorg.json.JSONArray;

importorg.json.JSONException;

importorg.json.JSONObject;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.util.Log;

importandroid.webkit.WebView;

publicclassMainActivityextendsActivity {

privatestaticfinalString TAG ="MainActivity";

privateContactService contactService;// 构建list的类

privateWebView webView;

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

contactService =newContactService();

webView = (WebView)this.findViewById(R.id.webView);

webView.getSettings().setJavaScriptEnabled(true);// 允许使用javascript脚本语言

webView.getSettings().setBuiltInZoomControls(true);// 设置可以缩放

// 设置javaScript可用于操作MainActivity类

webView.addJavascriptInterface(this,TAG);

webView.loadUrl("file:///android_asset/3dchart.html");

}

/**

* 实现将list转换成json格式字符串

* @return json格式的字符串

*/

publicString getContacts() {

List contacts = contactService.getContacts();

String json =null;

try{

JSONArray array =newJSONArray();

for(Contact contact : contacts) {

JSONObject item =newJSONObject();

item.put("name", contact.getName());

item.put("value", contact.getValue());

item.put("color", contact.getColor());

array.put(item);

}

json = array.toString();

Log.i(TAG, json);

// webView.loadUrl("javascript:show('" + json + "')");

}catch(JSONException e) {

e.printStackTrace();

}

returnjson;

}

}import java.util.List;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.webkit.WebView;

public class MainActivity extends Activity {

private static final String TAG = "MainActivity";

private ContactService contactService; // 构建list的类

private WebView webView;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

contactService = new ContactService();

webView = (WebView) this.findViewById(R.id.webView);

webView.getSettings().setJavaScriptEnabled(true); // 允许使用javascript脚本语言

webView.getSettings().setBuiltInZoomControls(true); // 设置可以缩放

// 设置javaScript可用于操作MainActivity类

webView.addJavascriptInterface(this,TAG);

webView.loadUrl("file:///android_asset/3dchart.html");

}

/**

* 实现将list转换成json格式字符串

* @return json格式的字符串

*/

public String getContacts() {

List contacts = contactService.getContacts();

String json = null;

try {

JSONArray array = new JSONArray();

for (Contact contact : contacts) {

JSONObject item = new JSONObject();

item.put("name", contact.getName());

item.put("value", contact.getValue());

item.put("color", contact.getColor());

array.put(item);

}

json = array.toString();

Log.i(TAG, json);

// webView.loadUrl("javascript:show('" + json + "')");

} catch (JSONException e) {

e.printStackTrace();

}

return json;

}

}

最后是编辑html文件。要实现ichartjs表图，首先要保证在assets目录下已导入了ichart - 1.0.js。然后对html文件进行编辑：

html>

Hello World

vardata=newArray();

varcontact=window.MainActivity.getContacts(); //得到MainActivity中转换出的json字符串

eval('data='+contact); //得到json数据

$(function(){

new iChart.Column3D({

render : 'canvasDiv', //渲染的Dom目标,canvasDiv为Dom的ID

data: data, //绑定数据

title : 'Top 5 Browsers in August 2012', //设置标题

showpercent:true, //显示百分比

decimalsnum:2,

width : 800, //设置宽度，默认单位为px

height : 400, //设置高度，默认单位为px

align:'left',

offsetx:50,

legend : {

enable : true

},

coordinate:{ //配置自定义坐标轴

scale:[{ //配置自定义值轴

width:600,

position:'left', //配置左值轴

start_scale:0, //设置开始刻度为0

end_scale:40, //设置结束刻度为40

scale_space:8, //设置刻度间距为8

listeners:{ //配置事件

parseText:function(t,x,y){ //设置解析值轴文本

return {text:t+"%"}

}

}

}]

}

}).draw(); //调用绘图方法开始绘图

});