ichartjs是一款基於HTML5的圖形庫。使用純javascript語言，利用HTML5的canvas標籤繪製各式圖形。ichartjs可以為web應用提供簡單、直觀、可互動的體驗級圖表組件。是web圖表方面的解決方案。最近正好在學HTML5，順便就用ichartjs來練習。ichartjs目前支援餅圖、折線圖、地區圖、直條圖、橫條圖。ichartjs是基於Apache License 2.0 協議的開源項目。今天介紹的是如何在android手機上動態實現3D直條圖。
實現主要原理是所需實現的資料打包成json格式，因為ichartjs規定的資料來源統一採用json對象方式。資料來源分為單一資料來源與集合多值資料來源，單一資料來源的值為單一的數值，而集合多值資料來源為數值集合。3D直條圖使用的單一的資料來源。廢話不多說了，直接上代碼。
首先編寫的是封裝資料的實體類Contact：
[java]
package com.chinasofti.html;
public class Contact {
private String name; // 瀏覽器的名稱
private double value; // 瀏覽器對應的所佔市場份額值
private String color; // 在直條圖中所顯示的顏色
/**
* 建構函式
* @param name 瀏覽器的名稱
* @param value 瀏覽器對應的所佔市場份額值
* @param color 在直條圖中所顯示的顏色
*/
public Contact(String name, double value, String color) {
this.name = name;
this.value = value;
this.color = color;
}
// 下面是三個執行個體變數的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;
}
}
接著建立一個list將所需要的contact對象添加到list中：
[java]
import java.util.ArrayList;
import java.util.List;
import com.chinasofti.html.Contact;
public class ContactService {
public List<Contact> getContacts() {
List<Contact> contacts = new ArrayList<Contact>();
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;
}
}
然後編寫android主介面代碼，實現list轉換成json格式字串，並實現和html檔案的互動：
[java]
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; // 構建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指令碼語言
webView.getSettings().setBuiltInZoomControls(true); // 設定可以縮放
// 設定javaScript可用於操作MainActivity類
webView.addJavascriptInterface(this,TAG);
webView.loadUrl("file:///android_asset/3dchart.html");
}
/**
* 實現將list轉換成json格式字串
* @return json格式的字串
*/
public String getContacts() {
List<Contact> 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檔案。要實現ichartjs表圖，首先要保證在assets目錄下已匯入了ichart - 1.0.js。然後對html檔案進行編輯：
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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中轉換出的json字串
eval('data='+contact); //得到json資料
$(function(){
new iChart.Column3D({
render : 'canvasDiv', //渲染的Dom目標,canvasDiv為Dom的ID
data: data, //綁定資料
title : 'Top 5 Browsers in August 2012', //設定標題
showpercent:true, //顯示百分比
decimalsnum:2,
width : 800, //設定寬度，預設單位為px
height : 400, //設定高度，預設單位為px
align:'left',
offsetx:50,
legend : {
enable : true
},
coordinate:{ //配置自訂座標軸
scale:[{ //配置自訂值軸
width:600,
position:'left', //配置左值軸
start_scale:0, //設定開始刻度為0
end_scale:40, //設定結束刻度為40
scale_space:8, //設定刻度間距為8
listeners:{ //配置事件
parseText:function(t,x,y){ //設定解析值軸文本
return {text:t+"%"}
}
}
}]
}
}).draw(); //調用繪圖方法開始繪圖
});
</script>
</head>
<body>
<div id='canvasDiv'></div>
</body>
</html>
最後得到效果為：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
