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

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

        接下来简要说一下类库中的东西，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的代码

package com.sq.Htmldemo;import java.util.Vector;import com.sq.iChart.chart.Pie3D;import com.sq.iChart.parameter.Chart;import com.sq.iChart.parameter.Footnote;import com.sq.iChart.parameter.Legend;import android.os.Bundle;import android.app.Activity;import android.util.Log;import android.view.Menu;import android.webkit.WebSettings;import android.webkit.WebView;public class MainActivity extends Activity {private WebView web;private WebSettings webSettings;private Vector<Item> chartData = new Vector<Item>();private Chart chart;private String data;private String data_labels;private Pie3D pie3D; //声明自定义库中的3D饼状图的类    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //        initColumn3DContacts();//        initArea2DContacts();        initPie3DContacts();                web = (WebView)findViewById(R.id.web);        webSettings = web.getSettings();        webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序        webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放        web.addJavascriptInterface(this, "mainActivity");//        chart = new Chart(800, 400, "通信行业");//        web.addJavascriptInterface(chart, "chart");        //        web.loadUrl("file:///android_asset/Column3D.html");//        web.loadUrl("file:///android_asset/Area2D.html");        web.loadUrl("file:///android_asset/Pie3D.html");                data = PackageChartData.PackageData(chartData);//        data = PackageChartData.PackageDoubleData(chartData);//        data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});                pie3D = new Pie3D(800, 400, "2012年7月份中国浏览器市场占有率Top6", data); //实例化一个3D饼状图对象        pie3D.setRadius(750); //设定饼状图的半径        pie3D.setyHeight(40); //设定饼状图中饼的厚度                Footnote footnote = new Footnote("Data from StatCounter", "right"); //实例化图表的脚注                Legend legend = new Legend(true, "center", "bottom"); //实例化图表的图例        legend.setRow(1); //设定图例显示在一行中                web.addJavascriptInterface(pie3D, "pie3D"); //使的在Pie3D.html中内嵌的JS中能够通过标签'pie3D'调用Pie3D中的方法获取3D饼状图所需的数据        web.addJavascriptInterface(footnote, "footnote");        web.addJavascriptInterface(legend, "legend");                Log.i("test", "data:"+data);//        Log.i("test", "data_labels:"+data_labels);    }    /**     * 初始化3D柱形图所需的内容，存放在chartData中,单一数据类型的     */    public void initColumn3DContacts() {    Item item = new Item();    item.setName("移动");    item.setValue(40);    item.setColor("#bc6666");    chartData.add(item);        item = new Item();    item.setName("联通");    item.setValue(20);    item.setColor("#6f83a5");    chartData.add(item);        item = new Item();    item.setName("电信");    item.setValue(30);    item.setColor("#76a871");    chartData.add(item);    }        /**     * 初始化2D面积图需要的内容，存放在chartData中,多值数据类型的     */    public void initArea2DContacts() {    Item item = new Item();    item.setName("上海");    item.setValues(new double[]{4,16,18,24,32,36,38,38,36,26,20,14});    item.setColor("#dad81f");    chartData.add(item);        item = new Item();    item.setName("北京");    item.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});    item.setColor("#1f7e92");    chartData.add(item);    }        private void initPie3DContacts() {    Item item = new Item();    item.setName("Other");    item.setValue(3.79);    item.setColor("#bd355e");    chartData.add(item);        item = new Item();    item.setName("IE");    item.setValue(50.20);    item.setColor("#a5c2d5");    chartData.add(item);        item = new Item();    item.setName("360 Browser");    item.setValue(26.55);    item.setColor("#cbab4f");    chartData.add(item);        item = new Item();    item.setName("Chrome");    item.setValue(8.26);    item.setColor("#76a871");    chartData.add(item);        item = new Item();    item.setName("Firefox");    item.setValue(4.06);    item.setColor("#9f7961");    chartData.add(item);        item = new Item();    item.setName("Maxthon");    item.setValue(2.78);    item.setColor("#a56f8f");    chartData.add(item);        item = new Item();    item.setName("Safari");    item.setValue(2.35);    item.setColor("#db9034");    chartData.add(item);    }        /**     * 用于调试的方法，该方法将在js脚本中，通过window.mainActivity.debugOut(“”)进行调用     * @param out     */    public void debugOut(String out) {// TODO Auto-generated method stub    Log.i("test", "debugOut:" + out);}        @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.activity_main, menu);        return true;    }}

（2）Pie3D.html

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>3D饼状图</title><meta name="Description" content="" /><meta name="Keywords" content="" /><script type="text/javascript" src="ichart-1.0.beta.min.js"></script><script type="text/javascript" >$(function(){var data = new Array();var contact = window.pie3D.getData(); //获得数据eval('data='+contact); //执行数据的赋值window.mainActivity.debugOut(data);         var title = window.pie3D.getTitle(); //获得标题        var width = window.pie3D.getWidth(); //获得宽度        var height = window.pie3D.getHeight(); //获得高度        var radius = window.pie3D.getRadius(); //获得半径        var yHeight = window.pie3D.getyHeight(); //获得厚度        window.mainActivity.debugOut(title);                var footnote = window.footnote.getFootnote(); //获得脚注                var align = window.legend.getAlign(); //获得图例的水平对齐方式        var valign = window.legend.getValign(); //获得图例的垂直对齐方式        var row = window.legend.getRow(); //获得图例的行数                new iChart.Pie3D({        render : 'canvasDiv',        data: data,        title : title,        width : width,height : height,        footnote : footnote,        legend : {        enable : true,        align : align,        valign : valign,        row:row,        column:'max'        },        showpercent:true,        decimalsnum:2,        yHeight:yHeight,        radius:radius,        }).draw();});</script></head><body ><div id='canvasDiv'></div></body></html>

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