在android上動(dòng)態(tài)實(shí)現(xiàn)ichartjs的3D柱形圖

風(fēng) — Fri, 30 Nov 2012 07:00:00 GMT

ichartjs是一款基于HTML5的圖形庫(kù)。使用純javascript語(yǔ)言，利用HTML5的canvas標(biāo)簽繪制各式圖形。ichartjs可以為web應(yīng)用提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件。是web圖表方面的解決方案。最近正好在學(xué)HTML5，順便就用ichartjs來(lái)練習(xí)。ichartjs目前支持餅圖、折線圖、區(qū)域圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0 協(xié)議的開(kāi)源項(xiàng)目。今天介紹的是如何在android手機(jī)上動(dòng)態(tài)實(shí)現(xiàn)3D柱形圖。若想詳細(xì)了解ichartjs，可以訪問(wèn)ichartjs官網(wǎng)：http://www.ichartjs.cn/index.html

實(shí)現(xiàn)主要原理是所需實(shí)現(xiàn)的數(shù)據(jù)打包成json格式，因?yàn)閕chartjs規(guī)定的數(shù)據(jù)源統(tǒng)一采用json對(duì)象方式。數(shù)據(jù)源分為單一數(shù)據(jù)源與集合多值數(shù)據(jù)源，單一數(shù)據(jù)源的值為單一的數(shù)值，而集合多值數(shù)據(jù)源為數(shù)值集合。3D柱形圖使用的單一的數(shù)據(jù)源。廢話不多說(shuō)了，直接上代碼。

首先編寫(xiě)的是封裝數(shù)據(jù)的實(shí)體類Contact：

[java] view plain copy print ?

package com.chinasofti.html;
public class Contact {
private String name; // 瀏覽器的名稱
private double value; // 瀏覽器對(duì)應(yīng)的所占市場(chǎng)份額值
private String color; // 在柱形圖中所顯示的顏色
/**
* 構(gòu)造函數(shù)
* @param name 瀏覽器的名稱
* @param value 瀏覽器對(duì)應(yīng)的所占市場(chǎng)份額值
* @param color 在柱形圖中所顯示的顏色
*/
public Contact(String name, double value, String color) {
this.name = name;
this.value = value;
this.color = color;
}
// 下面是三個(gè)實(shí)例變量的getters and setters
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getValue() {
return value;
}
public void setValue(double value) {
this.value = value;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}

package com.chinasofti.html;

public class Contact {
	private String name; // 瀏覽器的名稱
	private double value; // 瀏覽器對(duì)應(yīng)的所占市場(chǎng)份額值
	private String color; // 在柱形圖中所顯示的顏色
	
	/**
	 * 構(gòu)造函數(shù)
	 * @param name 瀏覽器的名稱
	 * @param value 瀏覽器對(duì)應(yīng)的所占市場(chǎng)份額值
	 * @param color 在柱形圖中所顯示的顏色
	 */
	public Contact(String name, double value, String color) {
		this.name = name;
		this.value = value;
		this.color = color;
	}
	
	// 下面是三個(gè)實(shí)例變量的getters and setters
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public double getValue() {
		return value;
	}
	public void setValue(double value) {
		this.value = value;
	}
	public String getColor() {
		return color;
	}
	public void setColor(String color) {
		this.color = color;
	}
	
}

接著創(chuàng)建一個(gè)list將所需要的contact對(duì)象添加到list中：

[java] view plain copy print ?

import java.util.ArrayList;
import java.util.List;
import com.chinasofti.html.Contact;
public class ContactService {
public List getContacts() {
List contacts = new ArrayList();
contacts.add(new Contact("IE", 32.85, "#a5c2d5"));
contacts.add(new Contact("Chrome", 33.59, "#cbab4f"));
contacts.add(new Contact("Firefox", 22.85, "#76a871"));
contacts.add(new Contact("Safari", 7.39, "#9f7961"));
contacts.add(new Contact("Opera", 1.63, "#a56f8f"));
contacts.add(new Contact("Other", 1.69, "#6f83a5"));
return contacts;
}
}

import java.util.ArrayList;
import java.util.List;

import com.chinasofti.html.Contact;

public class ContactService {

	public List getContacts() {
		List contacts = new ArrayList();
		contacts.add(new Contact("IE", 32.85, "#a5c2d5"));
		contacts.add(new Contact("Chrome", 33.59, "#cbab4f"));
		contacts.add(new Contact("Firefox", 22.85, "#76a871"));
		contacts.add(new Contact("Safari", 7.39, "#9f7961"));
		contacts.add(new Contact("Opera", 1.63, "#a56f8f"));
		contacts.add(new Contact("Other", 1.69, "#6f83a5"));
		return contacts;
	}
}

然后編寫(xiě)android主界面代碼，實(shí)現(xiàn)list轉(zhuǎn)換成json格式字符串，并實(shí)現(xiàn)和html文件的交互：

[java] view plain copy print ?

import java.util.List;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
public class MainActivity extends Activity {
private static final String TAG = "MainActivity";
private ContactService contactService; // 構(gòu)建list的類
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
contactService = new ContactService();
webView = (WebView) this.findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // 允許使用javascript腳本語(yǔ)言
webView.getSettings().setBuiltInZoomControls(true); // 設(shè)置可以縮放
// 設(shè)置javaScript可用于操作MainActivity類
webView.addJavascriptInterface(this,TAG);
webView.loadUrl("file:///android_asset/3dchart.html");
}
/**
* 實(shí)現(xiàn)將list轉(zhuǎn)換成json格式字符串
* @return json格式的字符串
*/
public String getContacts() {
List contacts = contactService.getContacts();
String json = null;
try {
JSONArray array = new JSONArray();
for (Contact contact : contacts) {
JSONObject item = new JSONObject();
item.put("name", contact.getName());
item.put("value", contact.getValue());
item.put("color", contact.getColor());
array.put(item);
}
json = array.toString();
Log.i(TAG, json);
// webView.loadUrl("javascript:show('" + json + "')");
} catch (JSONException e) {
e.printStackTrace();
}
return json;
}
}

import java.util.List;

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

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

public class MainActivity extends Activity {
	private static final String TAG = "MainActivity";
	private ContactService contactService; // 構(gòu)建list的類
	private WebView webView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		contactService = new ContactService();
		webView = (WebView) this.findViewById(R.id.webView);
		webView.getSettings().setJavaScriptEnabled(true); // 允許使用javascript腳本語(yǔ)言
		webView.getSettings().setBuiltInZoomControls(true); // 設(shè)置可以縮放
		// 設(shè)置javaScript可用于操作MainActivity類
		webView.addJavascriptInterface(this,TAG);
		webView.loadUrl("file:///android_asset/3dchart.html");
	}
	
	/**
	 * 實(shí)現(xiàn)將list轉(zhuǎn)換成json格式字符串
	 * @return json格式的字符串
	 */
	public String getContacts() {
		List contacts = contactService.getContacts();
		String json = null;
		try {
			JSONArray array = new JSONArray();
			for (Contact contact : contacts) {

				JSONObject item = new JSONObject();
				item.put("name", contact.getName());
				item.put("value", contact.getValue());
				item.put("color", contact.getColor());
				array.put(item);
			}
			json = array.toString();
			Log.i(TAG, json);
			// webView.loadUrl("javascript:show('" + json + "')");
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return json;
	}
}

最后是編輯html文件。要實(shí)現(xiàn)ichartjs表圖，首先要保證在assets目錄下已導(dǎo)入了ichart - 1.0.js。然后對(duì)html文件進(jìn)行編輯：

[html] view plain copy print ?

>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Worldtitle>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="ichart-1.0.js">script>
<script type="text/javascript">
var data = new Array();
var contact = window.MainActivity.getContacts(); //得到MainActivity中轉(zhuǎn)換出的json字符串
eval('data='+contact); //得到j(luò)son數(shù)據(jù)
$(function(){
new iChart.Column3D({
render : 'canvasDiv', //渲染的Dom目標(biāo),canvasDiv為Dom的ID
data: data, //綁定數(shù)據(jù)
title : 'Top 5 Browsers in August 2012', //設(shè)置標(biāo)題
showpercent:true, //顯示百分比
decimalsnum:2,
width : 800, //設(shè)置寬度，默認(rèn)單位為px
height : 400, //設(shè)置高度，默認(rèn)單位為px
align:'left',
offsetx:50,
legend : {
enable : true
},
coordinate:{ //配置自定義坐標(biāo)軸
scale:[{ //配置自定義值軸
width:600,
position:'left', //配置左值軸
start_scale:0, //設(shè)置開(kāi)始刻度為0
end_scale:40, //設(shè)置結(jié)束刻度為40
scale_space:8, //設(shè)置刻度間距為8
listeners:{ //配置事件
parseText:function(t,x,y){ //設(shè)置解析值軸文本
return {text:t+"%"}
}
}
}]
}
}).draw(); //調(diào)用繪圖方法開(kāi)始繪圖
});
script>
head>
<body>
<div id='canvasDiv'>div>
body>
html>



	
		
		Hello World

最后得到效果為：

風(fēng) 2012-11-30 15:00 發(fā)表評(píng)論

亚洲精品国产成人99久久,亚洲色欲www综合网,久久夜色精品国产亚洲

在android上動(dòng)態(tài)實(shí)現(xiàn)ichartjs的3D柱形圖