在android上动态实现ichartjs的3D柱形图

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：

[java]   view plain copy print ?

1. package com.chinasofti.html;  
2.   
3. public class Contact {  
4.     private String name; // 浏览器的名称   
5.     private double value; // 浏览器对应的所占市场份额值   
6.     private String color; // 在柱形图中所显示的颜色   
7.       
8.     /** 
9.      * 构造函数 
10.      * @param name 浏览器的名称 
11.      * @param value 浏览器对应的所占市场份额值 
12.      * @param color 在柱形图中所显示的颜色 
13.      */  
14.     public Contact(String name, double value, String color) {  
15.         this.name = name;  
16.         this.value = value;  
17.         this.color = color;  
18.     }  
19.       
20.     // 下面是三个实例变量的getters and setters   
21.     public String getName() {  
22.         return name;  
23.     }  
24.     public void setName(String name) {  
25.         this.name = name;  
26.     }  
27.     public double getValue() {  
28.         return value;  
29.     }  
30.     public void setValue(double value) {  
31.         this.value = value;  
32.     }  
33.     public String getColor() {  
34.         return color;  
35.     }  
36.     public void setColor(String color) {  
37.         this.color = color;  
38.     }  
39.       
40. }  

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

[java]   view plain copy print ?

1. import java.util.ArrayList;  
2. import java.util.List;  
3.   
4. import com.chinasofti.html.Contact;  
5.   
6. public class ContactService {  
7.   
8.     public List<Contact> getContacts() {  
9.         List<Contact> contacts = new ArrayList<Contact>();  
10.         contacts.add(new Contact("IE", 32.85, "#a5c2d5"));  
11.         contacts.add(new Contact("Chrome", 33.59, "#cbab4f"));  
12.         contacts.add(new Contact("Firefox", 22.85, "#76a871"));  
13.         contacts.add(new Contact("Safari", 7.39, "#9f7961"));  
14.         contacts.add(new Contact("Opera", 1.63, "#a56f8f"));  
15.         contacts.add(new Contact("Other", 1.69, "#6f83a5"));  
16.         return contacts;  
17.     }  
18. }  

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

 

[java]   view plain copy print ?

1. import java.util.List;  
2.   
3. import org.json.JSONArray;  
4. import org.json.JSONException;  
5. import org.json.JSONObject;  
6.   
7. import android.app.Activity;  
8. import android.os.Bundle;  
9. import android.util.Log;  
10. import android.webkit.WebView;  
11.   
12. public class MainActivity extends Activity {  
13.     private static final String TAG = "MainActivity";  
14.     private ContactService contactService; // 构建list的类   
15.     private WebView webView;  
16.   
17.     @Override  
18.     public void onCreate(Bundle savedInstanceState) {  
19.         super.onCreate(savedInstanceState);  
20.         setContentView(R.layout.main);  
21.   
22.         contactService = new ContactService();  
23.         webView = (WebView) this.findViewById(R.id.webView);  
24.         webView.getSettings().setJavaScriptEnabled(true); // 允许使用javascript脚本语言   
25.         webView.getSettings().setBuiltInZoomControls(true); // 设置可以缩放   
26.         // 设置javaScript可用于操作MainActivity类   
27.         webView.addJavascriptInterface(this,TAG);  
28.         webView.loadUrl("file:///android_asset/3dchart.html");  
29.     }  
30.       
31.     /** 
32.      * 实现将list转换成json格式字符串 
33.      * @return json格式的字符串 
34.      */  
35.     public String getContacts() {  
36.         List<Contact> contacts = contactService.getContacts();  
37.         String json = null;  
38.         try {  
39.             JSONArray array = new JSONArray();  
40.             for (Contact contact : contacts) {  
41.   
42.                 JSONObject item = new JSONObject();  
43.                 item.put("name", contact.getName());  
44.                 item.put("value", contact.getValue());  
45.                 item.put("color", contact.getColor());  
46.                 array.put(item);  
47.             }  
48.             json = array.toString();  
49.             Log.i(TAG, json);  
50.             // webView.loadUrl("javascript:show('" + json + "')");   
51.         } catch (JSONException e) {  
52.             e.printStackTrace();  
53.         }  
54.         return json;  
55.     }  
56. }  

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

 

[html]   view plain copy print ?

1. <!DOCTYPE html>  
2. <html>  
3.     <head>  
4.         <meta charset="UTF-8" />  
5.         <title>Hello World</title>  
6.         <meta name="Description" content="" />  
7.         <meta name="Keywords" content="" />  
8.         <script type="text/javascript" src="ichart-1.0.js"></script>  
9.         <script type="text/javascript">  
10.             var data = new Array();  
11.             var contact = window.MainActivity.getContacts(); //得到MainActivity中转换出的json字符串  
12.             eval('data='+contact); //得到json数据  
13.   
14. $(function(){     
15.     new iChart.Column3D({  
16.         render : 'canvasDiv', //渲染的Dom目标,canvasDiv为Dom的ID  
17.         data: data, //绑定数据  
18.         title : 'Top 5 Browsers in August 2012', //设置标题  
19.         showpercent:true, //显示百分比  
20.         decimalsnum:2,   
21.         width : 800, //设置宽度，默认单位为px  
22.         height : 400, //设置高度，默认单位为px  
23.         align:'left',  
24.         offsetx:50,  
25.         legend : {  
26.             enable : true  
27.         },  
28.         coordinate:{ //配置自定义坐标轴  
29.             scale:[{ //配置自定义值轴  
30.                  width:600,  
31.                  position:'left', //配置左值轴     
32.                  start_scale:0, //设置开始刻度为0  
33.                  end_scale:40, //设置结束刻度为40  
34.                  scale_space:8, //设置刻度间距为8  
35.                  listeners:{ //配置事件  
36.                     parseText:function(t,x,y){ //设置解析值轴文本  
37.                         return {text:t+"%"}  
38.                     }  
39.                 }  
40.             }]  
41.         }  
42.     }).draw(); //调用绘图方法开始绘图  
43. });  
44.             </script>  
45.         </head>  
46.         <body>  
47.             <div id='canvasDiv'></div>  
48.         </body>  
49. </html>  

最后得到效果为：