ichartjs是一款基于HTML5的圖形庫。使用純javascript語言，利用HTML5的canvas標簽繪制各式圖形。ichartjs可以為web應用提供簡單、直觀、可交互的體驗級圖表組件。是web圖表方面的解決方案。最近正好在學HTML5，順便就用ichartjs來練習。ichartjs目前支持餅圖、折線圖、區域圖、柱形圖、條形圖。ichartjs是基于Apache License 2.0 協議的開源項目。今天介紹的是如何在android手機上動態實現3D柱形圖。若想詳細了解ichartjs，可以訪問ichartjs官網：http://www.ichartjs.cn/index.html

實現主要原理是所需實現的數據打包成json格式，因為ichartjs規定的數據源統一采用json對象方式。數據源分為單一數據源與集合多值數據源，單一數據源的值為單一的數值，而集合多值數據源為數值集合。3D柱形圖使用的單一的數據源。廢話不多說了，直接上代碼。

首先編寫的是封裝數據的實體類Contact：

packagecom.chinasofti.html;

publicclassContact?{

privateString?name;//?瀏覽器的名稱

privatedoublevalue;//?瀏覽器對應的所占市場份額值

privateString?color;//?在柱形圖中所顯示的顏色

/**

*?構造函數

*?@param?name?瀏覽器的名稱

*?@param?value?瀏覽器對應的所占市場份額值

*?@param?color?在柱形圖中所顯示的顏色

*/

publicContact(String?name,doublevalue,?String?color)?{

this.name?=?name;

this.value?=?value;

this.color?=?color;

}

//?下面是三個實例變量的getters?and?setters

publicString?getName()?{

returnname;

}

publicvoidsetName(String?name)?{

this.name?=?name;

}

publicdoublegetValue()?{

returnvalue;

}

publicvoidsetValue(doublevalue)?{

this.value?=?value;

}

publicString?getColor()?{

returncolor;

}

publicvoidsetColor(String?color)?{

this.color?=?color;

}

}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中：

importjava.util.ArrayList;

importjava.util.List;

importcom.chinasofti.html.Contact;

publicclassContactService?{

publicList?getContacts()?{

List?contacts?=newArrayList();

contacts.add(newContact("IE",32.85,"#a5c2d5"));

contacts.add(newContact("Chrome",33.59,"#cbab4f"));

contacts.add(newContact("Firefox",22.85,"#76a871"));

contacts.add(newContact("Safari",7.39,"#9f7961"));

contacts.add(newContact("Opera",1.63,"#a56f8f"));

contacts.add(newContact("Other",1.69,"#6f83a5"));

returncontacts;

}

}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;

}

}

然后編寫android主界面代碼，實現list轉換成json格式字符串，并實現和html文件的交互：

importjava.util.List;

importorg.json.JSONArray;

importorg.json.JSONException;

importorg.json.JSONObject;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.util.Log;

importandroid.webkit.WebView;

publicclassMainActivityextendsActivity?{

privatestaticfinalString?TAG?="MainActivity";

privateContactService?contactService;//?構建list的類

privateWebView?webView;

@Override

publicvoidonCreate(Bundle?savedInstanceState)?{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

contactService?=newContactService();

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格式的字符串

*/

publicString?getContacts()?{

List?contacts?=?contactService.getContacts();

String?json?=null;

try{

JSONArray?array?=newJSONArray();

for(Contact?contact?:?contacts)?{

JSONObject?item?=newJSONObject();

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();

}

returnjson;

}

}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 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>

Hello?World

vardata=newArray();

varcontact=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();?//調用繪圖方法開始繪圖

});

總結

以上是生活随笔為你收集整理的java动态生成柱状图3D_在android上动态实现ichartjs的3D柱形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。