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>



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com