[置顶] 基于ichartjs图形库在android上使用HTML动态实现3D柱形图
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
一、本文在android中使用基于HTML5的图形库 ichartjs ，根据android中传过来的数组在JS中动态生成ichartjs中显示图表所需的data格式。
做出的效果：
![[置顶] 基于ichartjs图形库在android上使用HTML动态实现3D柱形图_第1张图片](http://img.e-com-net.com/image/info5/3ffec83d6b5a4d289eddad13e74b5395.jpg)
具体代码如下：
（1）android中主界面代码：
package com.sq.Htmldemo;
import java.util.Vector;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView web;
private WebSettings webSettings;
private Vector<Item> chart = new Vector<Item>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.initContacts();
web = (WebView)findViewById(R.id.web);
webSettings = web.getSettings();
webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
web.addJavascriptInterface(this, "mainActivity");
web.loadUrl("file:///android_asset/chart.html");
}
/**
* 初始化图标要显示的内容，存放在chart中
*/
public void initContacts() {
Item item = new Item();
item.setName("移动");
item.setValue(50);
item.setColor("#bc6666");
chart.add(item);
Item item1 = new Item();
item1.setName("联通");
item1.setColor("#6f83a5");
item1.setValue(20);
chart.add(item1);
Item item2 = new Item();
item2.setName("电信");
item2.setColor("#76a871");
item2.setValue(30);
chart.add(item2);
}
/**
* 该方法将在js脚本中，通过window.phonebook.getContacts()进行调用
* 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组
* @return
*/
public JavaArrayJSWrapper getContacts(){
Log.i("test", "getContacts execute!");
Item[] contacts = new Item[this.chart.size()];
contacts = this.chart.toArray(contacts);
return new JavaArrayJSWrapper(contacts);
}
public void debugOut(String out) {
Log.i("test", "debugOut:" + out);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
（2）自定义类Item代码
package com.sq.Htmldemo;
/**
* 自定义类，用于存储图中每个对象的名称，值和颜色
* @author SQ
*
*/
public class Item {
private String name;
private int value;
private String color;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
（3）自定义类JavaArrayJSWrapper代码
package com.sq.Htmldemo;
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];
}
}
（4）HTML中代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D柱形图</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="ichart-1.0.beta.min.js"></script>
<script type="text/javascript" >
$(function(){
var data = new Array();
var contact = window.mainActivity.getContacts();
if(contact){
window.mainActivity.debugOut(contact.length()+"contact get success!");
var i = 0;
while(i < contact.length()){
data[i] = {name : contact.get(i).getName() ,value : contact.get(i).getValue(), color : contact.get(i).getColor()};
window.mainActivity.debugOut("data["+i+"]"+data[i]);
i++;
}
}else{
window.mainActivity.debugOut(contact.length() + "contacts get error!");
}
new iChart.Column3D({
render : 'canvasDiv',
data: data,
title : 'Status Of Customer Service',
width : 900,
height : 400,
coordinate:{
scale:[{
position:'left',
start_scale:0,
end_scale:60,
scale_space:5
}]
}
}).draw();
});
</script>
</head>
<body >
<div id='canvasDiv'>
</div>
</body>
</html>
二、还可以用一种更简单的方法，就是在java文件中将ichartjs 所需的data数据打包成JSON格式的字符串传递过去，在html中的JS中使用eval( )进行处理。具体代码如下：
（1）android中主界面代码
package com.sq.Htmldemo;
import java.util.Vector;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView web;
private WebSettings webSettings;
private Vector<Item> chart = new Vector<Item>();
private Parameter parameter = new Parameter(950, 450, "通信行业");
private String data;
private String dataLabels;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.initContacts();
web = (WebView)findViewById(R.id.web);
webSettings = web.getSettings();
webSettings.setJavaScriptEnabled(true); //设定该WebView可以执行JavaScript程序
webSettings.setBuiltInZoomControls(true); //设定该WebView可以缩放
web.addJavascriptInterface(this, "mainActivity");
web.loadUrl("file:///android_asset/Column3D.html");
data = PackageChartData.PackageData(chart);
Log.i("test", "params:"+data);
}
/**
* 初始化图标要显示的内容，存放在chart中
*/
public void initContacts() {
Item item = new Item();
item.setName("移动");
item.setValue(40);
item.setColor("#bc6666");
chart.add(item);
Item item1 = new Item();
item1.setName("联通");
item1.setColor("#6f83a5");
item1.setValue(20);
chart.add(item1);
Item item2 = new Item();
item2.setName("电信");
item2.setColor("#76a871");
item2.setValue(30);
chart.add(item2);
}
public String getContact(){
Log.i("test", "params:"+data);
return data;
}
/**
* 该方法将在js脚本中，通过window.phonebook.getContacts()进行调用
* 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组
* @return
*/
public JavaArrayJSWrapper getContacts(){
Log.i("test", "getContacts execute!");
Item[] contacts = new Item[this.chart.size()];
contacts = this.chart.toArray(contacts);
return new JavaArrayJSWrapper(contacts);
}
/**
* 该方法将在js脚本中，通过window.phonebook.getWidth()进行调用
* 得到图表的宽度
* @return int
*/
public int getWidth(){
return parameter.getWidth();
}
/**
* 该方法将在js脚本中，通过window.phonebook.getHeight()进行调用
* 得到图表的高度
* @return int
*/
public int getHeight(){
return parameter.getHeight();
}
private Object getChartTitle(){
return (Object)parameter.getTitle();
}
/**
* 用于调试的方法，该方法将在js脚本中，通过window.phonebook.debugOut(“”)进行调用
* @param out
*/
public void debugOut(String out) {
Log.i("test", "debugOut:" + out);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
（2）PackageChartData类
package com.sq.Htmldemo;
import java.util.Vector;
import org.json.JSONArray;
import org.json.JSONObject;
public class PackageChartData {
/**
* 将单一数据源打包成JSON格式
* @param chartData 存储单一数据源的数组
* @return
*/
public static String PackageData(Vector<Item> 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);
}
} catch (Exception e) {
e.printStackTrace();
}
return root.toString();
}
/**
* 将多值数据源打包成JSON格式
* @param chartData
* @return
*/
public static String PackageDoublieData(Vector<Item> 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 (Exception e) {
e.printStackTrace();
}
return root.toString();
}
/**
* 将多值数据源相应的data_labels打包成JSON格式
* @param dataLabels
* @return
*/
public static String PackageDataLabels(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 root.toString();
}
}
（3）html中代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D柱形图</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="ichart-1.0.beta.min.js"></script>
<script type="text/javascript" >
$(function(){
var data = new Array();
var contact = window.mainActivity.getContact();
eval('data='+contact);
window.mainActivity.debugOut(data);
var width = window.mainActivity.getWidth();
var height = window.mainActivity.getHeight();
new iChart.Column3D({
render : 'canvasDiv',
data: data,
title : "通信行业",
width : width,
height : height,
coordinate:{
scale:[{
position:'left',
start_scale:0,
end_scale:40,
scale_space:5
}]
}
}).draw();
});
</script>
</head>
<body >
<div id='canvasDiv'>
</div>
</body>
</html>