基于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(800400"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+'',”


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值