风之语

posts(201) comments(182) trackbacks(1)
  • BlogJava
  • 联系
  • RSS 2.0 Feed 聚合
  • 管理

常用链接

  • 我的随笔
  • 我的评论
  • 我的参与
  • 最新评论

留言簿

  • 给我留言
  • 查看公开留言
  • 查看私人留言

随笔分类

  • ajax(1)
  • android(1)
  • apache(1)
  • AppFuse(1)
  • BIRT(1)
  • iText(1)
  • JSF(8)
  • kettle(1)
  • linux(5)
  • mac(1)
  • maven(1)
  • MSTR(3)
  • Open XML(1)
  • Oracle(21)
  • RCP
  • Struts(2)
  • Struts2(2)
  • SybaseIQ(6)
  • tapestry
  • tomcat(2)
  • weblogic(1)
  • webservice(1)
  • weka(1)
  • 云计算(1)
  • 收藏(31)
  • 数据仓库(11)
  • 架构设计(3)
  • 生活(2)
  • 集群(1)
  • 项目管理(6)

随笔档案

  • 2012年12月 (4)
  • 2012年11月 (1)
  • 2012年7月 (2)
  • 2011年8月 (1)
  • 2011年7月 (1)
  • 2011年3月 (1)
  • 2010年12月 (2)
  • 2010年11月 (4)
  • 2010年10月 (3)
  • 2010年9月 (5)
  • 2010年8月 (1)
  • 2010年7月 (4)
  • 2010年3月 (1)
  • 2010年2月 (3)
  • 2009年12月 (3)
  • 2009年11月 (4)
  • 2009年9月 (3)
  • 2009年6月 (5)
  • 2009年5月 (3)
  • 2009年4月 (2)
  • 2009年3月 (5)
  • 2009年2月 (4)
  • 2009年1月 (2)
  • 2008年11月 (2)
  • 2008年9月 (1)
  • 2008年7月 (2)
  • 2008年6月 (4)
  • 2008年5月 (6)
  • 2008年4月 (1)
  • 2008年3月 (1)
  • 2007年12月 (2)
  • 2007年11月 (5)
  • 2007年10月 (2)
  • 2007年9月 (3)
  • 2007年8月 (3)
  • 2007年4月 (1)
  • 2007年3月 (2)
  • 2007年2月 (2)
  • 2007年1月 (2)
  • 2006年12月 (3)
  • 2006年8月 (2)
  • 2006年7月 (2)
  • 2006年6月 (2)
  • 2006年4月 (2)
  • 2006年3月 (1)
  • 2006年2月 (3)
  • 2006年1月 (6)
  • 2005年12月 (6)
  • 2005年11月 (4)
  • 2005年10月 (17)
  • 2005年9月 (25)
  • 2005年8月 (16)
  • 2005年7月 (8)

相册

  • 技术图片

收藏夹

  • java

link

My wife

  • My wife's blog

最新随笔

  • 1. apache修改最大连接并用ab网站压力测试
  • 2. Vm虚拟机访问本地硬盘文件
  • 3. NFS文件无法写入的权限问题
  • 4. weblogic设置上传文件访问权限
  • 5. 在android上动态实现ichartjs的3D柱形图
  • 6. 使用Oracle trunc 来指定精确的年月日时分秒
  • 7. Quartz 2.1.5 web应用配置
  • 8. LoginAny 使用笔记
  • 9. MyEclipse 无响应的几种解决办法
  • 10. java.sql.SQLException: No more data to read from socket

搜索

  •  

积分与排名

  • 积分 - 393847
  • 排名 - 141

最新评论

  • 1. re: 使用Oracle trunc 来指定精确的年月日时分秒[未登录]
  • 政治
  • --张三
  • 2. re: 干掉流氓软件vrvrf_c.exe,vrvedp_m.exe[未登录]
  • `
  • --1
  • 3. re: 无需刻录DMG光盘,教你在VMWare下安装MAC OS X Snow Leopard 10.6
  • 我走到了换DMG映像的时候,然后就没有反应了,这个是什么情况,是不是我的映像文件有问题,还是。。。。
  • --玉竹常青
  • 4. re: LoginAny 使用笔记
  • 怎么没一个人留言,现在来是不是在挖坟啊
  • --ellipse
  • 5. MSTR web应用的部署[未登录]
  • 请问,如何用oracle Application Server服务器部署mstr web应用?
  • --rocky

阅读排行榜

评论排行榜

View Post

在android上动态实现ichartjs的3D柱形图

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:

[java] view plaincopyprint?
  1. package com.chinasofti.html;  
  2.   
  3. public class Contact {  
  4.     private String name; // 浏览器的名称   
  5.     private double value; // 浏览器对应的所占市场份额值   
  6.     private String color; // 在柱形图中所显示的颜色   
  7.       
  8.     /** 
  9.      * 构造函数 
  10.      * @param name 浏览器的名称 
  11.      * @param value 浏览器对应的所占市场份额值 
  12.      * @param color 在柱形图中所显示的颜色 
  13.      */  
  14.     public Contact(String name, double value, String color) {  
  15.         this.name = name;  
  16.         this.value = value;  
  17.         this.color = color;  
  18.     }  
  19.       
  20.     // 下面是三个实例变量的getters and setters   
  21.     public String getName() {  
  22.         return name;  
  23.     }  
  24.     public void setName(String name) {  
  25.         this.name = name;  
  26.     }  
  27.     public double getValue() {  
  28.         return value;  
  29.     }  
  30.     public void setValue(double value) {  
  31.         this.value = value;  
  32.     }  
  33.     public String getColor() {  
  34.         return color;  
  35.     }  
  36.     public void setColor(String color) {  
  37.         this.color = color;  
  38.     }  
  39.       
  40. }  
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] view plaincopyprint?
  1. import java.util.ArrayList;  
  2. import java.util.List;  
  3.   
  4. import com.chinasofti.html.Contact;  
  5.   
  6. public class ContactService {  
  7.   
  8.     public List<Contact> getContacts() {  
  9.         List<Contact> contacts = new ArrayList<Contact>();  
  10.         contacts.add(new Contact("IE", 32.85, "#a5c2d5"));  
  11.         contacts.add(new Contact("Chrome", 33.59, "#cbab4f"));  
  12.         contacts.add(new Contact("Firefox", 22.85, "#76a871"));  
  13.         contacts.add(new Contact("Safari", 7.39, "#9f7961"));  
  14.         contacts.add(new Contact("Opera", 1.63, "#a56f8f"));  
  15.         contacts.add(new Contact("Other", 1.69, "#6f83a5"));  
  16.         return contacts;  
  17.     }  
  18. }  
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] view plaincopyprint?
  1. import java.util.List;  
  2.   
  3. import org.json.JSONArray;  
  4. import org.json.JSONException;  
  5. import org.json.JSONObject;  
  6.   
  7. import android.app.Activity;  
  8. import android.os.Bundle;  
  9. import android.util.Log;  
  10. import android.webkit.WebView;  
  11.   
  12. public class MainActivity extends Activity {  
  13.     private static final String TAG = "MainActivity";  
  14.     private ContactService contactService; // 构建list的类   
  15.     private WebView webView;  
  16.   
  17.     @Override  
  18.     public void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.main);  
  21.   
  22.         contactService = new ContactService();  
  23.         webView = (WebView) this.findViewById(R.id.webView);  
  24.         webView.getSettings().setJavaScriptEnabled(true); // 允许使用javascript脚本语言   
  25.         webView.getSettings().setBuiltInZoomControls(true); // 设置可以缩放   
  26.         // 设置javaScript可用于操作MainActivity类   
  27.         webView.addJavascriptInterface(this,TAG);  
  28.         webView.loadUrl("file:///android_asset/3dchart.html");  
  29.     }  
  30.       
  31.     /** 
  32.      * 实现将list转换成json格式字符串 
  33.      * @return json格式的字符串 
  34.      */  
  35.     public String getContacts() {  
  36.         List<Contact> contacts = contactService.getContacts();  
  37.         String json = null;  
  38.         try {  
  39.             JSONArray array = new JSONArray();  
  40.             for (Contact contact : contacts) {  
  41.   
  42.                 JSONObject item = new JSONObject();  
  43.                 item.put("name", contact.getName());  
  44.                 item.put("value", contact.getValue());  
  45.                 item.put("color", contact.getColor());  
  46.                 array.put(item);  
  47.             }  
  48.             json = array.toString();  
  49.             Log.i(TAG, json);  
  50.             // webView.loadUrl("javascript:show('" + json + "')");   
  51.         } catch (JSONException e) {  
  52.             e.printStackTrace();  
  53.         }  
  54.         return json;  
  55.     }  
  56. }  
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] view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8" />  
  5.         <title>Hello World</title>  
  6.         <meta name="Description" content="" />  
  7.         <meta name="Keywords" content="" />  
  8.         <script type="text/javascript" src="ichart-1.0.js"></script>  
  9.         <script type="text/javascript">  
  10.             var data = new Array();  
  11.             var contact = window.MainActivity.getContacts(); //得到MainActivity中转换出的json字符串  
  12.             eval('data='+contact); //得到json数据  
  13.   
  14. $(function(){     
  15.     new iChart.Column3D({  
  16.         render : 'canvasDiv', //渲染的Dom目标,canvasDiv为Dom的ID  
  17.         data: data, //绑定数据  
  18.         title : 'Top 5 Browsers in August 2012', //设置标题  
  19.         showpercent:true, //显示百分比  
  20.         decimalsnum:2,   
  21.         width : 800, //设置宽度,默认单位为px  
  22.         height : 400, //设置高度,默认单位为px  
  23.         align:'left',  
  24.         offsetx:50,  
  25.         legend : {  
  26.             enable : true  
  27.         },  
  28.         coordinate:{ //配置自定义坐标轴  
  29.             scale:[{ //配置自定义值轴  
  30.                  width:600,  
  31.                  position:'left', //配置左值轴     
  32.                  start_scale:0, //设置开始刻度为0  
  33.                  end_scale:40, //设置结束刻度为40  
  34.                  scale_space:8, //设置刻度间距为8  
  35.                  listeners:{ //配置事件  
  36.                     parseText:function(t,x,y){ //设置解析值轴文本  
  37.                         return {text:t+"%"}  
  38.                     }  
  39.                 }  
  40.             }]  
  41.         }  
  42.     }).draw(); //调用绘图方法开始绘图  
  43. });  
  44.             </script>  
  45.         </head>  
  46.         <body>  
  47.             <div id='canvasDiv'></div>  
  48.         </body>  
  49. </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>

最后得到效果为:

 


 

posted on 2012-11-30 15:00 风 阅读(3579) 评论(0)  编辑  收藏 所属分类: android

新用户注册  刷新评论列表  

只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   知识库   C++博客   博问   管理
 
 
Powered by:
BlogJava
Copyright © 风