基于ichartjs图形库在android上使用HTML动态实现3D柱形图

最新推荐文章于 2021-07-19 16:20:12 发布

置顶 sunquan1127

最新推荐文章于 2021-07-19 16:20:12 发布

阅读量4.4k

点赞数

分类专栏： Android 文章标签： android 图形 string html5 javascript object

本文链接：https://blog.csdn.net/sunquan1127/article/details/7940879

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。

一、本文在android中使用基于HTML5的图形库 ichartjs ，根据android中传过来的数组在JS中动态生成ichartjs中显示图表所需的data格式。

做出的效果：

具体代码如下：

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