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

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

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

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

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 data_labels;  
18.       
19.     @Override  
20.     public void onCreate(Bundle savedInstanceState) {  
21.         super.onCreate(savedInstanceState);  
22.         setContentView(R.layout.activity_main);  
23.           
24. //        this.initContact();  
25.         this.initContacts();  
26.           
27.         web = (WebView)findViewById(R.id.web);  
28.         webSettings = web.getSettings();  
29.         webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序  
30.         webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放  
31.         web.addJavascriptInterface(this, "mainActivity");  
32.           
33. //        web.loadUrl("file:///android_asset/Column3D.html");  
34. //        data = PackageChartData.PackageData(chart);  
35.           
36.         web.loadUrl("file:///android_asset/Area2D.html");  
37.         data = PackageChartData.PackageDoubleData(chart);  
38.         data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});  
39.           
40.         Log.i("test", "data:"+data);  
41.         Log.i("test", "data_labels:"+data_labels);  
42.     }  
43.   
44.     /** 
45.      * 初始化图标要显示的内容，存放在chart中,单一数据类型的 
46.      */  
47.     public void initContact() {  
48.         Item item = new Item();  
49.         item.setName("移动");  
50.         item.setValue(40);  
51.         item.setColor("#bc6666");  
52.         chart.add(item);  
53.         Item item1 = new Item();  
54.         item1.setName("联通");  
55.         item1.setColor("#6f83a5");  
56.         item1.setValue(20);  
57.         chart.add(item1);  
58.         Item item2 = new Item();  
59.         item2.setName("电信");  
60.         item2.setColor("#76a871");  
61.         item2.setValue(30);  
62.         chart.add(item2);  
63.     }  
64.       
65.     /** 
66.      * 初始化图标要显示的内容，存放在chart中,多值数据类型的 
67.      */  
68.     public void initContacts() {  
69.         Item item = new Item();  
70.         item.setName("上海");  
71.         item.setValues(new double[]{4,16,18,24,32,36,38,38,36,26,20,14});  
72.         item.setColor("#dad81f");  
73.         chart.add(item);  
74.         Item item1 = new Item();  
75.         item1.setName("北京");  
76.         item1.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});  
77.         item1.setColor("#1f7e92");  
78.         chart.add(item1);  
79.     }  
80.       
81.     /** 
82.      * 该方法将在js脚本中，通过window.mainActivity.getContact()进行调用,得到图表显示所需的JSON格式的data 
83.      * @return 
84.      */  
85.     public String getContact(){  
86.         Log.i("test", "get data:"+data);  
87.         return data;  
88.     }  
89.       
90.     /** 
91.      * 该方法将在js脚本中，通过window.mainActivity.getContactLabels()进行调用,得到图表显示所需的JSON格式的data_labels 
92.      * @return 
93.      */  
94.     public String getContactLabels() {  
95.         Log.i("test", "get data_labels:"+data_labels);  
96.         return data_labels;  
97.     }  
98.       
99.     /** 
100.      * 该方法将在js脚本中，通过window.mainActivity.getContacts()进行调用 
101.      * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组 
102.      * @return 
103.      */  
104.     public JavaArrayJSWrapper getContacts(){  
105.         Log.i("test", "getContacts execute!");  
106.         Item[] contacts = new Item[this.chart.size()];  
107.         contacts = this.chart.toArray(contacts);  
108.         return new JavaArrayJSWrapper(contacts);  
109.     }  
110.       
111.     /** 
112.      * 该方法将在js脚本中，通过window.mainActivity.getWidth()进行调用 
113.      * 得到图表的宽度 
114.      * @return int 
115.      */  
116.     public int getWidth(){  
117.         return parameter.getWidth();  
118.     }  
119.       
120.     /** 
121.      * 该方法将在js脚本中，通过window.mainActivity.getHeight()进行调用 
122.      * 得到图表的高度 
123.      * @return int 
124.      */  
125.     public int getHeight(){  
126.         return parameter.getHeight();  
127.     }  
128.       
129.     public String getChartTitle(){  
130.         return parameter.getTitle();  
131.     }  
132.       
133.     /** 
134.      * 用于调试的方法，该方法将在js脚本中，通过window.mainActivity.debugOut(“”)进行调用 
135.      * @param out 
136.      */  
137.     public void debugOut(String out) {  
138.         // TODO Auto-generated method stub  
139.         Log.i("test", "debugOut:" + out);  
140.     }  
141.       
142.     @Override  
143.     public boolean onCreateOptionsMenu(Menu menu) {  
144.         getMenuInflater().inflate(R.menu.activity_main, menu);  
145.         return true;  
146.     }  
147. }  
148. </span>  

2、AreaD.html文件源码：

[html]  view plain  copy

1. <span style="font-size:18px;"><!DOCTYPE html>  
2. <html>  
3.     <head>  
4.         <meta charset="UTF-8" />  
5.         <title>多数据源的面积图</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.             $(function(){     
11.                 var data = new Array();  
12.                 var data_labels = new Array();  
13.                 var contact = window.mainActivity.getContact();  
14.                 var contact_lab = window.mainActivity.getContactLabels();  
15.                 eval('data='+contact);  
16.                 window.mainActivity.debugOut("data="+data);   
17.                 eval('data_labels='+window.mainActivity.getContactLabels());  
18.                 window.mainActivity.debugOut("data_labels="+data_labels);   
19.                   
20.                 new iChart.Area2D({  
21.                     render : 'canvasDiv',  
22.                     data: data,  
23.                     title : 'Average Temperature Of 2012',  
24.                     width : 800,  
25.                     height : 400,  
26.                     legend : {  
27.                         enable : true  
28.                     },  
29.                     tip:{  
30.                         enable : true  
31.                     },  
32.                     listeners:{  
33.                         parseTipText:function(d,t,i){  
34.                             return data_labels[i]+"份平均温度:"+t+"℃";  
35.                         }  
36.                     },  
37.                     coordinate:{  
38.                         scale:[{  
39.                              position:'left',     
40.                              start_scale:0,  
41.                              end_scale:40,  
42.                              scale_space:5,  
43.                              listeners:{  
44.                                 parseText:function(t,x,y){  
45.                                     return {text:t+"℃"}  
46.                                 }  
47.                             }  
48.                         },{  
49.                              position:'bottom',   
50.                              start_scale:1,  
51.                              end_scale:12,  
52.                              parseText:function(t,x,y){  
53.                                 return {textY:y+10}  
54.                              },  
55.                              labels:data_labels  
56.                         }]  
57.                     }  
58.                 }).draw();  
59.             });  
60.         </script>  
61.     </head>  
62.     <body >  
63.         <div id='canvasDiv'>  
64.         </div>  
65.     </body>  
66. </html>  
67. </span>  

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

[java]  view plain  copy

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