基于ichartjs在android上使用HTML5实现各种图表的类库

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

事先声明下，由于时间比较短，类库才刚建起来一个框架，还缺不少的东西，可能还有一些错误，先拿出来亮亮，以后慢慢再添加。

        接下来简要说一下类库中的东西，com.sq.iChart.parameter包中的10个类除了Chart是图表的基类外，其他的都是图表的一些基本参数，可以独立使用。com.sq.iChart.chart包内的7个类是常用的七个图表：2D面积图、2D条形图、2D柱形图、3D柱形图、2D折线图、2D饼状图、3D饼状图，都是继承自Chart基类。使用时直接声明一个图表，例如下文中的3D饼状图，然后添加自己想要设定的参数，再使用web.addJavascriptInterface(pie3D, "pie3D");使的在Pie3D.html中内嵌的JS中，能够通过标签'pie3D'调用Pie3D中的方法，获取3D饼状图所需的数据。parameter包中除Chart以外的九个类也是一样的使用方法。

        用起来不知道怎么样，我也是第一次写这种类库，只能想到这种方法实现。感觉看起来比较清晰。如果有什么不恰当的地方或是大家谁有更好的idea，欢迎留言讨论。类库我上传到资源中了，0资源分。

下面贴一个自己写的使用这个类库的例子：

首先是效果图

（1）MainActivity的代码

[java]  view plain  copy

1. <span style="font-size:18px;">package com.sq.Htmldemo;  
2.   
3. import java.util.Vector;  
4.   
5. import com.sq.iChart.chart.Pie3D;  
6. import com.sq.iChart.parameter.Chart;  
7. import com.sq.iChart.parameter.Footnote;  
8. import com.sq.iChart.parameter.Legend;  
9.   
10. import android.os.Bundle;  
11. import android.app.Activity;  
12. import android.util.Log;  
13. import android.view.Menu;  
14. import android.webkit.WebSettings;  
15. import android.webkit.WebView;  
16.   
17. public class MainActivity extends Activity {  
18.     private WebView web;  
19.     private WebSettings webSettings;  
20.     private Vector<Item> chartData = new Vector<Item>();  
21.     private Chart chart;  
22.     private String data;  
23.     private String data_labels;  
24.     private Pie3D pie3D; //声明自定义库中的3D饼状图的类  
25.       
26.     @Override  
27.     public void onCreate(Bundle savedInstanceState) {  
28.         super.onCreate(savedInstanceState);  
29.         setContentView(R.layout.activity_main);  
30.           
31. //        initColumn3DContacts();  
32. //        initArea2DContacts();  
33.         initPie3DContacts();  
34.           
35.         web = (WebView)findViewById(R.id.web);  
36.         webSettings = web.getSettings();  
37.         webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序  
38.         webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放  
39.         web.addJavascriptInterface(this, "mainActivity");  
40. //        chart = new Chart(800, 400, "通信行业");  
41. //        web.addJavascriptInterface(chart, "chart");  
42.           
43. //        web.loadUrl("file:///android_asset/Column3D.html");  
44. //        web.loadUrl("file:///android_asset/Area2D.html");  
45.         web.loadUrl("file:///android_asset/Pie3D.html");  
46.           
47.         data = PackageChartData.PackageData(chartData);  
48. //        data = PackageChartData.PackageDoubleData(chartData);  
49. //        data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});  
50.           
51.         pie3D = new Pie3D(800, 400, "2012年7月份中国浏览器市场占有率Top6", data); //实例化一个3D饼状图对象  
52.         pie3D.setRadius(750); //设定饼状图的半径  
53.         pie3D.setyHeight(40); //设定饼状图中饼的厚度  
54.           
55.         Footnote footnote = new Footnote("Data from StatCounter", "right"); //实例化图表的脚注  
56.           
57.         Legend legend = new Legend(true, "center", "bottom"); //实例化图表的图例  
58.         legend.setRow(1); //设定图例显示在一行中  
59.           
60.         web.addJavascriptInterface(pie3D, "pie3D"); //使的在Pie3D.html中内嵌的JS中能够通过标签'pie3D'调用Pie3D中的方法获取3D饼状图所需的数据  
61.         web.addJavascriptInterface(footnote, "footnote");  
62.         web.addJavascriptInterface(legend, "legend");  
63.           
64.         Log.i("test", "data:"+data);  
65. //        Log.i("test", "data_labels:"+data_labels);  
66.     }  
67.   
68.     /** 
69.      * 初始化3D柱形图所需的内容，存放在chartData中,单一数据类型的 
70.      */  
71.     public void initColumn3DContacts() {  
72.         Item item = new Item();  
73.         item.setName("移动");  
74.         item.setValue(40);  
75.         item.setColor("#bc6666");  
76.         chartData.add(item);  
77.           
78.         item = new Item();  
79.         item.setName("联通");  
80.         item.setValue(20);  
81.         item.setColor("#6f83a5");  
82.         chartData.add(item);  
83.           
84.         item = new Item();  
85.         item.setName("电信");  
86.         item.setValue(30);  
87.         item.setColor("#76a871");  
88.         chartData.add(item);  
89.     }  
90.       
91.     /** 
92.      * 初始化2D面积图需要的内容，存放在chartData中,多值数据类型的 
93.      */  
94.     public void initArea2DContacts() {  
95.         Item item = new Item();  
96.         item.setName("上海");  
97.         item.setValues(new double[]{4,16,18,24,32,36,38,38,36,26,20,14});  
98.         item.setColor("#dad81f");  
99.         chartData.add(item);  
100.           
101.         item = new Item();  
102.         item.setName("北京");  
103.         item.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});  
104.         item.setColor("#1f7e92");  
105.         chartData.add(item);  
106.     }  
107.       
108.     private void initPie3DContacts() {  
109.         Item item = new Item();  
110.         item.setName("Other");  
111.         item.setValue(3.79);  
112.         item.setColor("#bd355e");  
113.         chartData.add(item);  
114.           
115.         item = new Item();  
116.         item.setName("IE");  
117.         item.setValue(50.20);  
118.         item.setColor("#a5c2d5");  
119.         chartData.add(item);  
120.           
121.         item = new Item();  
122.         item.setName("360 Browser");  
123.         item.setValue(26.55);  
124.         item.setColor("#cbab4f");  
125.         chartData.add(item);  
126.           
127.         item = new Item();  
128.         item.setName("Chrome");  
129.         item.setValue(8.26);  
130.         item.setColor("#76a871");  
131.         chartData.add(item);  
132.           
133.         item = new Item();  
134.         item.setName("Firefox");  
135.         item.setValue(4.06);  
136.         item.setColor("#9f7961");  
137.         chartData.add(item);  
138.           
139.         item = new Item();  
140.         item.setName("Maxthon");  
141.         item.setValue(2.78);  
142.         item.setColor("#a56f8f");  
143.         chartData.add(item);  
144.           
145.         item = new Item();  
146.         item.setName("Safari");  
147.         item.setValue(2.35);  
148.         item.setColor("#db9034");  
149.         chartData.add(item);  
150.     }  
151.       
152.     /** 
153.      * 用于调试的方法，该方法将在js脚本中，通过window.mainActivity.debugOut(“”)进行调用 
154.      * @param out 
155.      */  
156.     public void debugOut(String out) {  
157.         // TODO Auto-generated method stub  
158.         Log.i("test", "debugOut:" + out);  
159.     }  
160.       
161.     @Override  
162.     public boolean onCreateOptionsMenu(Menu menu) {  
163.         getMenuInflater().inflate(R.menu.activity_main, menu);  
164.         return true;  
165.     }  
166. }  
167. </span>  

（2）Pie3D.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.pie3D.getData(); //获得数据  
14.             eval('data='+contact); //执行数据的赋值  
15.             window.mainActivity.debugOut(data);   
16.       
17.             var title = window.pie3D.getTitle(); //获得标题  
18.             var width = window.pie3D.getWidth(); //获得宽度  
19.             var height = window.pie3D.getHeight(); //获得高度  
20.             var radius = window.pie3D.getRadius(); //获得半径  
21.             var yHeight = window.pie3D.getyHeight(); //获得厚度  
22.             window.mainActivity.debugOut(title);  
23.               
24.             var footnote = window.footnote.getFootnote(); //获得脚注  
25.               
26.             var align = window.legend.getAlign(); //获得图例的水平对齐方式  
27.             var valign = window.legend.getValign(); //获得图例的垂直对齐方式  
28.             var row = window.legend.getRow(); //获得图例的行数  
29.               
30.             new iChart.Pie3D({  
31.                 render : 'canvasDiv',  
32.                 data: data,  
33.                 title : title,  
34.                 width : width,  
35.                 height : height,  
36.                 footnote : footnote,  
37.                 legend : {  
38.                     enable : true,  
39.                     align : align,  
40.                     valign : valign,  
41.                     row:row,  
42.                     column:'max'  
43.                 },  
44.                 showpercent:true,  
45.                 decimalsnum:2,  
46.                 yHeight:yHeight,  
47.                 radius:radius,  
48.             }).draw();  
49.         });  
50.         </script>  
51.     </head>  
52.     <body >  
53.         <div id='canvasDiv'>  
54.         </div>  
55.     </body>  
56. </html></span>  

注：有的手机可能运行不出来，有可能是往html文件中传String类型的值时会出错，可以这样改，例如Pie3D.html的33行：“title : title,”，其中后一个title为上面var出来的变量，接受的是String类型的值，这样绑定在有的手机上无法实现，可以改为“title : title+'',”