Android使用ichartjs在HTML5中动态绘制图表

HTML5是未来移动app开发的重头戏，其中利用HTML5动态绘制图表是一个很重要的应用。本实例就是在Android中利用ichartjs在HTML5中动态绘制图表。绘制图表所需的数据以及图表的标题和属性都是通过程序动态写入html页面的。

程序主文件：

package com.example.mycharttest;

import java.util.Vector;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MyChartActivity extends Activity {

private WebView web;

private String chart_data_json,data_labels;

private Vector<ChartData> chart_data = new Vector<ChartData>();
ChartParameter chartparameter = new ChartParameter();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
        initData();
        initparmeter();
        chart_data_json = JsonPram.LabelData(chart_data);
        data_labels = JsonPram.DataLabels(new String[]{"一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"});
        
        System.out.println(chart_data_json);
        web = (WebView) this.findViewById(R.id.web);
        web.getSettings().setBuiltInZoomControls(true);
        web.getSettings().setJavaScriptEnabled(true);
        web.addJavascriptInterface(this, "chart_data_json");//与html的接口，传递图表中的数据
        web.addJavascriptInterface(chartparameter, "chart_parameter");//传递的是图表的标题、宽度和高度
        web.loadUrl("file:///android_asset/JS.html");
    }
    
    /**
     * 在JS.html中调用该函数，将chart_data_json的数值传过去
     * @return
     */
    public String getContacts() {
    return chart_data_json;
    }
    
    /**
     * 传递横坐标的刻度值
     * @return
     */
    public String getDataLabels() {
    return data_labels;
    }
    /**
     * 没用到，作用是在JS.html中调用，传递参数
     * @return
     */
    public JavaArrayJSWrapper getContact() {
    ChartData[] a = new ChartData[this.chart_data.size()];
    a = this.chart_data.toArray(a);
    return new JavaArrayJSWrapper(a);
    }
    
    /**
     * 初始化图标的数据
     */
    public void initData() {
    
    ChartData charttest = new ChartData();
    charttest.setName("IE");
    charttest.setValues(new double[]{4,16,18,20,32,36,38,38,36,26,20,14});
    charttest.setColor("#a5c2d5");
    chart_data.add(charttest);
    
    charttest = new ChartData();
    charttest.setName("Chrome");
    charttest.setValues(new double[]{1,12,18,20,28,34,36,34,31,27,24,6});
    charttest.setColor("#cbab4f");
    chart_data.add(charttest);
    
    charttest = new ChartData();
    charttest.setName("Chrome");
    charttest.setValues(new double[]{2,12,14,20,28,32,34,36,33,24,14,4});
    charttest.setColor("#97b3bc");
    chart_data.add(charttest);
    }
    
    /**
     * 初始化标题、宽度和高度
     */
    public void initparmeter() {
    chartparameter.setTitle("2012年平均气温");
    chartparameter.setWidth(800);
    chartparameter.setHeight(400);
    }
    
    public void debugout(String info) {
    Log.i("TAG",info);
    System.out.println(info);
    }
   
}

将传递的图表数据打包成JSON格式的类：

package com.example.mycharttest;

import java.util.Vector;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * 将vector的数据打包成JSON格式
 * @author CYL
 *
 */
public class JsonPram {
public static String PackagePostData(Vector<ChartData> 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);
System.out.println(temp);

}
} catch (JSONException e) {
e.printStackTrace();
return null;
}
return root.toString();
}

public static String LabelData(Vector<ChartData> 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(JSONException e) {
e.printStackTrace();
return null;
}
return root.toString();
}

public static String DataLabels(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 null;
}
return root.toString();
}
}

导入的数据类：

package com.example.mycharttest;

public class ChartData {
String name;
double[] values;
String color;

public void setName(String name){
this.name = name;
}

public String getName(){
return name;
}

public void setValues(double[] values){
this.values = values;
}

public double[] getValues(){
return values;
}

public void setColor(String color){
this.color = color;
}

public String getColor(){
return color;
}
}

导入的图表的属性类

package com.example.mycharttest;


public class ChartParameter {

String title;
int width, height;

public void setTitle(String title) {
this.title = title;
}

public String getTitle() {
return title;
}

public void setWidth(int width) {
this.width = width;
}

public int getWidth() {
return width;
}

public void setHeight(int height) {
this.height = height;
}

public int getHeight() {
return height;
}
}

JavaArrayJSWrapper.java

package com.example.mycharttest;

public class JavaArrayJSWrapper {

private Object[] innerArray;

public JavaArrayJSWrapper(Object[] a){
this.innerArray = a;
}

public int length(){
return this.innerArray.length;
}

public Object get(int index){
return this.innerArray[index];
}
}

布局文件main_activity.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/web"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </WebView>

</LinearLayout>

绘制图表的HTML，其中导入的ichart-1.0.min.js可以在http://www.ichartjs.cn/获取：

<!DOCTYPE html>
<html>
<head>
<meta charset="GBK" />
<title>ichartjs</title>
<meta http-equiv="keywords" content="ichartjs demo,Html5 demo,ichart demo"></meta>
<meta http-equiv="description" content="The ichartjs's gallery center,ichartjs"></meta>
<script type="text/javascript" src="ichart-1.0.min.js"></script>
<link rel="stylesheet" href="../css/demo.css" type="text/css"/>

<script type="text/javascript">

$(function(){

var data;
var data_labels;
        window.chart_data_json.debugout("inside js onload");
        var chartDataJson = window.chart_data_json.getContacts();
        var dataLabels = window.chart_data_json.getDataLabels();
        window.chart_data_json.debugout(chartDataJson);
        eval('data='+chartDataJson);//eval作用是将外部传进来的String数据作为本地js数据，并执行
        eval('data_labels='+dataLabels);
        
        var chart_title = window.chart_parameter.getTitle();
        window.chart_data_json.debugout(chart_title);
        var chart_width = window.chart_parameter.getWidth();
        window.chart_data_json.debugout(chart_width);
        var chart_height = window.chart_parameter.getHeight();
        window.chart_data_json.debugout(chart_height);

new iChart.Area2D({
render : 'canvasDiv',
data: data,
title : chart_title,
width : chart_width,
height : chart_height,
area_opacity:0.15,
legend : {
enable : true
},
tip:{
enable : true
},
listeners:{
parseTipText:function(d,t,i){
return d.name+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>

更多相关文章

随机推荐