基于ichartjs图形库在android上使用HTML动态实现3D柱形图

转载地址：http://blog.csdn.net/sunquan1127/article/details/7940879

      ichartjs 是一款基于HTML5的图形库。使用纯JavaScript语言, 利用Html5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

一、本文在Android中使用基于HTML5的图形库 ichartjs ，根据android中传过来的数组在JS中动态生成ichartjs中显示图表所需的data格式。

做出的效果：

具体代码如下：

（1）android中主界面代码：

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. import java.util.Vector;  
4. import android.os.Bundle;  
5. import android.app.Activity;  
6. import android.util.Log;  
7. import android.view.Menu;  
8. import android.webkit.WebSettings;  
9. import android.webkit.WebView;  
10.   
11. public class MainActivity extends Activity {  
12.     private WebView web;  
13.     private WebSettings webSettings;  
14.     private Vector<Item> chart = new Vector<Item>();  
15.     @Override  
16.     public void onCreate(Bundle savedInstanceState) {  
17.         super.onCreate(savedInstanceState);  
18.         setContentView(R.layout.activity_main);  
19.           
20.         this.initContacts();  
21.         web = (WebView)findViewById(R.id.web);  
22.         webSettings = web.getSettings();  
23.         webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序  
24.         webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放  
25.         web.addJavascriptInterface(this, "mainActivity");  
26.         web.loadUrl("file:///android_asset/chart.html");  
27.     }  
28.   
29.     /** 
30.      * 初始化图标要显示的内容，存放在chart中 
31.      */  
32.     public void initContacts() {  
33.         Item item = new Item();  
34.         item.setName("移动");  
35.         item.setValue(50);  
36.         item.setColor("#bc6666");  
37.         chart.add(item);  
38.         Item item1 = new Item();  
39.         item1.setName("联通");  
40.         item1.setColor("#6f83a5");  
41.         item1.setValue(20);  
42.         chart.add(item1);  
43.         Item item2 = new Item();  
44.         item2.setName("电信");  
45.         item2.setColor("#76a871");  
46.         item2.setValue(30);  
47.         chart.add(item2);  
48.     }  
49.       
50.     /** 
51.      * 该方法将在js脚本中，通过window.phonebook.getContacts()进行调用 
52.      * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组 
53.      * @return 
54.      */  
55.     public JavaArrayJSWrapper getContacts(){  
56.         Log.i("test", "getContacts execute!");  
57.         Item[] contacts = new Item[this.chart.size()];  
58.         contacts = this.chart.toArray(contacts);  
59.         return new JavaArrayJSWrapper(contacts);  
60.     }  
61.       
62.     public void debugOut(String out) {  
63.         Log.i("test", "debugOut:" + out);  
64.     }  
65.       
66.     @Override  
67.     public boolean onCreateOptionsMenu(Menu menu) {  
68.         getMenuInflater().inflate(R.menu.activity_main, menu);  
69.         return true;  
70.     }  
71. }</span>  

（2）自定义类Item代码

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. /** 
4.  * 自定义类，用于存储图中每个对象的名称，值和颜色 
5.  * @author SQ 
6.  * 
7.  */  
8. public class Item {  
9.     private String name;  
10.     private int value;  
11.     private String color;  
12.       
13.     public String getName() {  
14.         return name;  
15.     }  
16.     public void setName(String name) {  
17.         this.name = name;  
18.     }  
19.     public int getValue() {  
20.         return value;  
21.     }  
22.     public void setValue(int value) {  
23.         this.value = value;  
24.     }  
25.     public String getColor() {  
26.         return color;  
27.     }  
28.     public void setColor(String color) {  
29.         this.color = color;  
30.     }  
31. }</span>  

（3）自定义类JavaArrayJSWrapper代码

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. public class JavaArrayJSWrapper {  
4.   
5.     private Object[] innerArray;  
6.       
7.     public JavaArrayJSWrapper(Object[] a){  
8.         this.innerArray = a;  
9.     }  
10.       
11.     public int length(){  
12.         return this.innerArray.length;  
13.     }  
14.       
15.     public Object get(int index){  
16.         return this.innerArray[index];  
17.     }  
18. }</span>  

（4）HTML中代码：

[html]  view plain  copy

1. <span style="font-size:18px;"><!DOCTYPE html>  
2. <html>  
3.     <head>  
4.         <meta charset="UTF-8" />  
5.         <title>3D柱形图</title>  
6.         <meta name="Description" content="" />  
7.         <meta name="Keywords" content="" />  
8.         <script type="text/javascript" src="ichart-1.0.beta.min.js"></script>  
9.         <script type="text/javascript" >  
10.           
11.         $(function(){  
12.             var data = new Array();  
13.             var contact = window.mainActivity.getContacts();  
14.             if(contact){  
15.                 window.mainActivity.debugOut(contact.length()+"contact get success!");  
16.                 var i = 0;  
17.                 while(i < contact.length()){  
18.                     data[i] = {name : contact.get(i).getName() ,value : contact.get(i).getValue(), color : contact.get(i).getColor()};  
19.                     window.mainActivity.debugOut("data["+i+"]"+data[i]);  
20.                     i++;  
21.                 }  
22.             }else{  
23.                 window.mainActivity.debugOut(contact.length() + "contacts get error!");  
24.             }  
25.       
26.             new iChart.Column3D({  
27.                 render : 'canvasDiv',  
28.                 data: data,  
29.                 title : 'Status Of Customer Service',  
30.                 width : 900,  
31.                 height : 400,  
32.                 coordinate:{  
33.                     scale:[{  
34.                          position:'left',     
35.                          start_scale:0,  
36.                          end_scale:60,  
37.                          scale_space:5  
38.                     }]  
39.                 }  
40.             }).draw();  
41.         });  
42.         </script>  
43.     </head>  
44.     <body >  
45.         <div id='canvasDiv'>  
46.         </div>  
47.     </body>  
48. </html></span>  

二、还可以用一种更简单的方法，就是在Java文件中将ichartjs 所需的data数据打包成JSON格式的字符串传递过去，在html中的JS中使用eval( )进行处理。具体代码如下：

（1）android中主界面代码

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. import java.util.Vector;  
4. import android.os.Bundle;  
5. import android.app.Activity;  
6. import android.util.Log;  
7. import android.view.Menu;  
8. import android.webkit.WebSettings;  
9. import android.webkit.WebView;  
10.   
11. public class MainActivity extends Activity {  
12.     private WebView web;  
13.     private WebSettings webSettings;  
14.     private Vector<Item> chart = new Vector<Item>();  
15.     private Parameter parameter = new Parameter(950, 450, "通信行业");  
16.     private String data;  
17.     private String dataLabels;  
18.       
19.     @Override  
20.     public void onCreate(Bundle savedInstanceState) {  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.activity_main);  
23.           
24.         this.initContacts();  
25.         web = (WebView)findViewById(R.id.web);  
26.         webSettings = web.getSettings();  
27.         webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序  
28.         webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放  
29.         web.addJavascriptInterface(this, "mainActivity");  
30.           
31.         web.loadUrl("file:///android_asset/Column3D.html");  
32.         data = PackageChartData.PackageData(chart);  
33.           
34.           
35.         Log.i("test", "params:"+data);  
36.     }  
37.   
38.     /** 
39.      * 初始化图标要显示的内容，存放在chart中 
40.      */  
41.     public void initContacts() {  
42.         Item item = new Item();  
43.         item.setName("移动");  
44.         item.setValue(40);  
45.         item.setColor("#bc6666");  
46.         chart.add(item);  
47.         Item item1 = new Item();  
48.         item1.setName("联通");  
49.         item1.setColor("#6f83a5");  
50.         item1.setValue(20);  
51.         chart.add(item1);  
52.         Item item2 = new Item();  
53.         item2.setName("电信");  
54.         item2.setColor("#76a871");  
55.         item2.setValue(30);  
56.         chart.add(item2);  
57.     }  
58.       
59.     public String getContact(){  
60.         Log.i("test", "params:"+data);  
61.         return data;  
62.     }  
63.       
64.     /** 
65.      * 该方法将在js脚本中，通过window.phonebook.getContacts()进行调用 
66.      * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组 
67.      * @return 
68.      */  
69.     public JavaArrayJSWrapper getContacts(){  
70.         Log.i("test", "getContacts execute!");  
71.         Item[] contacts = new Item[this.chart.size()];  
72.         contacts = this.chart.toArray(contacts);  
73.         return new JavaArrayJSWrapper(contacts);  
74.     }  
75.       
76.     /** 
77.      * 该方法将在js脚本中，通过window.phonebook.getWidth()进行调用 
78.      * 得到图表的宽度 
79.      * @return int 
80.      */  
81.     public int getWidth(){  
82.         return parameter.getWidth();  
83.     }  
84.       
85.     /** 
86.      * 该方法将在js脚本中，通过window.phonebook.getHeight()进行调用 
87.      * 得到图表的高度 
88.      * @return int 
89.      */  
90.     public int getHeight(){  
91.         return parameter.getHeight();  
92.     }  
93.       
94.     private Object getChartTitle(){  
95.         return (Object)parameter.getTitle();  
96.     }  
97.       
98.     /** 
99.      * 用于调试的方法，该方法将在js脚本中，通过window.phonebook.debugOut(“”)进行调用 
100.      * @param out 
101.      */  
102.     public void debugOut(String out) {  
103.         Log.i("test", "debugOut:" + out);  
104.     }  
105.       
106.     @Override  
107.     public boolean onCreateOptionsMenu(Menu menu) {  
108.         getMenuInflater().inflate(R.menu.activity_main, menu);  
109.         return true;  
110.     }  
111. }  
112. </span>  

（2）PackageChartData类

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. import java.util.Vector;  
4.   
5. import org.json.JSONArray;  
6. import org.json.JSONObject;  
7.   
8. public class PackageChartData {  
9.       
10.     /** 
11.      * 将单一数据源打包成JSON格式 
12.      * @param chartData 存储单一数据源的数组 
13.      * @return 
14.      */  
15.     public static String PackageData(Vector<Item> chartData){  
16.         JSONArray root = new JSONArray();  
17.         try {  
18.             for(int i = 0; i < chartData.size(); ++i){  
19.                 JSONObject temp = new JSONObject();  
20.                 temp.put("name", chartData.get(i).getName());  
21.                 temp.put("value", chartData.get(i).getValue());  
22.                 temp.put("color", chartData.get(i).getColor());  
23.                   
24.                 root.put(temp);  
25.             }  
26.         } catch (Exception e) {  
27.             e.printStackTrace();  
28.         }  
29.         return root.toString();  
30.     }  
31.       
32.     /** 
33.      * 将多值数据源打包成JSON格式 
34.      * @param chartData 
35.      * @return 
36.      */  
37.     public static String PackageDoublieData(Vector<Item> chartData){  
38.         JSONArray root = new JSONArray();  
39.         try {  
40.             for(int i = 0; i < chartData.size(); ++i){  
41.                 JSONObject temp = new JSONObject();  
42.                 temp.put("name", chartData.get(i).getName());  
43.                   
44.                 JSONArray values = new JSONArray();  
45.                 for(int j = 0; j < chartData.get(i).getValues().length; ++j){  
46.                     values.put(chartData.get(i).getValues()[j]);  
47.                 }  
48.                 temp.put("value", values);  
49.                 temp.put("color", chartData.get(i).getColor());  
50.                   
51.                 root.put(temp);  
52.             }  
53.         } catch (Exception e) {  
54.             e.printStackTrace();  
55.         }  
56.         return root.toString();  
57.     }  
58.       
59.     /** 
60.      * 将多值数据源相应的data_labels打包成JSON格式 
61.      * @param dataLabels 
62.      * @return 
63.      */  
64.     public static String PackageDataLabels(String[] dataLabels){  
65.         JSONArray root = new JSONArray();  
66.         try {  
67.             for(int i = 0; i < dataLabels.length; ++i){  
68.                 root.put(dataLabels[i]);  
69.             }  
70.         } catch (Exception e) {  
71.             e.printStackTrace();  
72.         }  
73.         return root.toString();  
74.     }  
75. }  
76. </span>  

（3）html中代码

[html]  view plain  copy

1. <span style="font-size:18px;"><!DOCTYPE html>  
2. <html>  
3.     <head>  
4.         <meta charset="UTF-8" />  
5.         <title>3D柱形图</title>  
6.         <meta name="Description" content="" />  
7.         <meta name="Keywords" content="" />  
8.         <script type="text/javascript" src="ichart-1.0.beta.min.js"></script>  
9.         <script type="text/javascript" >  
10.           
11.         $(function(){  
12.             var data = new Array();  
13.             var contact = window.mainActivity.getContact();  
14.             eval('data='+contact);  
15.             window.mainActivity.debugOut(data);   
16.               
17.             var width = window.mainActivity.getWidth();  
18.             var height = window.mainActivity.getHeight();  
19.               
20.             new iChart.Column3D({  
21.                 render : 'canvasDiv',  
22.                 data: data,  
23.                 title : "通信行业",  
24.                 width : width,  
25.                 height : height,  
26.                 coordinate:{  
27.                     scale:[{  
28.                          position:'left',     
29.                          start_scale:0,  
30.                          end_scale:40,  
31.                          scale_space:5  
32.                     }]  
33.                 }  
34.             }).draw();  
35.         });  
36.         </script>  
37.     </head>  
38.     <body >  
39.         <div id='canvasDiv'>  
40.         </div>  
41.     </body>  
42. </html>  
43. </span>