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

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

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

[置顶] 基于ichartjs图形库在android上使用HTML动态实现多数据源的面积图_第1张图片

1、android主界面代码：

package com.sq.Htmldemo;import java.util.Vector;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> chart = new Vector<Item>();private Parameter parameter = new Parameter(950, 450, "通信");private String data;private String data_labels;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //        this.initContact();        this.initContacts();                web = (WebView)findViewById(R.id.web);        webSettings = web.getSettings();        webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序        webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放        web.addJavascriptInterface(this, "mainActivity");        //        web.loadUrl("file:///android_asset/Column3D.html");//        data = PackageChartData.PackageData(chart);                web.loadUrl("file:///android_asset/Area2D.html");        data = PackageChartData.PackageDoubleData(chart);        data_labels = PackageChartData.PackageDataLabels(new String[]{"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"});                Log.i("test", "data:"+data);        Log.i("test", "data_labels:"+data_labels);    }    /**     * 初始化图标要显示的内容，存放在chart中,单一数据类型的     */    public void initContact() {    Item item = new Item();    item.setName("移动");    item.setValue(40);    item.setColor("#bc6666");    chart.add(item);    Item item1 = new Item();    item1.setName("联通");    item1.setColor("#6f83a5");    item1.setValue(20);    chart.add(item1);    Item item2 = new Item();    item2.setName("电信");    item2.setColor("#76a871");    item2.setValue(30);    chart.add(item2);    }        /**     * 初始化图标要显示的内容，存放在chart中,多值数据类型的     */    public void initContacts() {    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");    chart.add(item);    Item item1 = new Item();    item1.setName("北京");    item1.setValues(new double[]{8,12,14,20,26,28,30,26,28,20,16,10});    item1.setColor("#1f7e92");    chart.add(item1);    }        /**     * 该方法将在js脚本中，通过window.mainActivity.getContact()进行调用,得到图表显示所需的JSON格式的data     * @return     */    public String getContact(){    Log.i("test", "get data:"+data);    return data;    }        /**     * 该方法将在js脚本中，通过window.mainActivity.getContactLabels()进行调用,得到图表显示所需的JSON格式的data_labels     * @return     */    public String getContactLabels() {    Log.i("test", "get data_labels:"+data_labels);    return data_labels;}        /**     * 该方法将在js脚本中，通过window.mainActivity.getContacts()进行调用     * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组     * @return     */    public JavaArrayJSWrapper getContacts(){    Log.i("test", "getContacts execute!");    Item[] contacts = new Item[this.chart.size()];    contacts = this.chart.toArray(contacts);    return new JavaArrayJSWrapper(contacts);    }        /**     * 该方法将在js脚本中，通过window.mainActivity.getWidth()进行调用     * 得到图表的宽度     * @return int     */    public int getWidth(){    return parameter.getWidth();    }        /**     * 该方法将在js脚本中，通过window.mainActivity.getHeight()进行调用     * 得到图表的高度     * @return int     */    public int getHeight(){    return parameter.getHeight();    }        public String getChartTitle(){    return parameter.getTitle();    }        /**     * 用于调试的方法，该方法将在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、AreaD.html文件源码：

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>多数据源的面积图</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 data_labels = new Array();var contact = window.mainActivity.getContact();var contact_lab = window.mainActivity.getContactLabels();eval('data='+contact);window.mainActivity.debugOut("data="+data); eval('data_labels='+window.mainActivity.getContactLabels());window.mainActivity.debugOut("data_labels="+data_labels); new iChart.Area2D({render : 'canvasDiv',data: data,title : 'Average Temperature Of 2012',width : 800,height : 400,legend : {enable : true},tip:{enable : true},listeners:{parseTipText:function(d,t,i){return data_labels[i]+"份平均温度:"+t+"℃";}},coordinate:{scale:[{ position:'left', start_scale:0, end_scale:40, scale_space:5, listeners:{parseText:function(t,x,y){return {text:t+"℃"}}}},{ position:'bottom', start_scale:1, end_scale:12, parseText:function(t,x,y){return {textY:y+10} }, labels:data_labels}]}}).draw();});</script></head><body ><div id='canvasDiv'></div></body></html>

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

package com.sq.Htmldemo;import java.util.Vector;import org.json.JSONArray;import org.json.JSONObject;public class PackageChartData {/** * 将单一数据源打包成JSON格式 * @param chartData 存储单一数据源的数组 * @return */public static String PackageData(Vector<Item> chartData){JSONArray root = new JSONArray();try {for(int i = 0; i < chartData.size(); ++i){JSONObject temp = new JSONObject();temp.put("name", chartData.get(i).getName());temp.put("value", chartData.get(i).getValue());temp.put("color", chartData.get(i).getColor());root.put(temp);}} catch (Exception e) {e.printStackTrace();}return root.toString();}/** * 将多值数据源打包成JSON格式 * @param chartData * @return */public static String PackageDoubleData(Vector<Item> chartData){JSONArray root = new JSONArray();try {for(int i = 0; i < chartData.size(); ++i){JSONObject temp = new JSONObject();temp.put("name", chartData.get(i).getName());JSONArray values = new JSONArray();for(int j = 0; j < chartData.get(i).getValues().length; ++j){values.put(chartData.get(i).getValues()[j]);}temp.put("value", values);temp.put("color", chartData.get(i).getColor());root.put(temp);}} catch (Exception e) {e.printStackTrace();}return root.toString();}/** * 将多值数据源相应的data_labels打包成JSON格式 * @param dataLabels * @return */public static String PackageDataLabels(String[] dataLabels){JSONArray root = new JSONArray();try {for(int i = 0; i < dataLabels.length; ++i){root.put(dataLabels[i]);}} catch (Exception e) {e.printStackTrace();}return root.toString();}}

更多相关文章

随机推荐