jquery 饼图

郑云飞

浏览: 817282 次
性别:
来自: 北京

最近访客更多访客>>

anlinko

ssydxa219

u012363178

jiyilee

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery json JavaScript CSS 游戏

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>饼状图Chart</title>
<link rel="stylesheet" type="text/css" href="<%=basePath %>admin/test/bingtu/codebase/GooPieChart.css"/>
<script  type="text/javascript" src="<%=basePath %>admin/test/bingtu/codebase/jquery-1.3.2.min.js"></script>
<!--[if IE]><script  type="text/javascript" src="codebase/excanvas.compiled.js"></script><![endif]-->
<script  type="text/javascript" src="<%=basePath %>admin/test/bingtu/codebase/GooFunc.js"></script>
<script  type="text/javascript" src="<%=basePath %>admin/test/bingtu/codebase/GooPieChart.js"></script>
<script>
var canvas,canvas2;
var property={
	con_width:600,
	con_height:400,
	canvas_width:320,
	canvas_height:320,
	canvas_top:40,
	canvas_left:80,
	core_x:160,
	core_y:160,
	radius:150,
	defaultColor:"#cccccc"  //默认的颜色,如果dataKind中没有，则直接该默认颜色
}

 </script>
 <script>
$(document).ready(function(){
	canvas=$.createGooPieChart($("#mycanvas"),property);
	canvas.setTitle("AlienWare9月销量","份");
	//canvas.loadPieData(data,"num","总销量: &d 份");//固定的数据
	//从后台获取数据
	$.ajax({
				   type: 'post',
				   url: "<%=basePath%>getDatadiaochaAction",
				   
				   success: function(data)
				   {
				     var json=new Array();
				     json=data.split("\t");/*分割字符串*/
		                                    var datakind=eval("("+json[1]+")");/*转换为json格式*/
				     var piedate=eval("("+json[0]+")");/*转换为json格式*/
	     	                                    canvas.setDataKind(datakind);
				    canvas.loadPieData(piedate,"num","总销量: &d 份");//从后台获取的数据
				   }
			});
			});
</script>
</head>
<body>
<div id="mycanvas"></div>


</body>
</html>

从后台获取数据

public String getData()
	{
		 StringBuffer json = new StringBuffer();
		 StringBuffer json2 = new StringBuffer();
		 json2.append("{note_width:100,note_height:180,note_top:30,note_left:460,sort_type:\"v\",text_color:\"#ffffff\",").append("" +
		 		"items:[").append("" +
		 	 "{id:\"c1\",color:\"#0054A6\",label:\"电源\"},").append("" +
		 	 "{id:\"c2\",color:\"#0072BC\",label:\"笔记本\"},").append("" +
		 	 "{id:\"c3\",color:\"#00A99D\",label:\"机箱\"},").append("" +
		 	 "{id:\"c4\",color:\"#00A651\",label:\"主板\"},").append("" +
		 	 "{id:\"c5\",color:\"#8DC63F\",label:\"显卡\"},").append("" +
		 	 "{id:\"c6\",color:\"#F8F200\",label:\"鼠标\"},").append("" +
		 	 "{id:\"c7\",color:\"#F7941D\",label:\"游戏手柄\"},").append("" +
		 	 "{id:\"c8\",color:\"#F26522\",label:\"内存\"},").append("" +
		 	 "{id:\"c9\",color:\"#ED1C24\",label:\"散热器\"}").append("" +
		 	   "]}");
			json.append("[{id:\"c1\",num:").append(100).append("}," +
					"{id:\"c2\",num:").append(150).append("}," +
					"{id:\"c3\",num:").append(100).append("}," +
					"{id:\"c4\",num:").append(150).append("}," +
					"{id:\"c5\",num:").append(100).append("}," +
					"{id:\"c6\",num:").append(100).append("}," +
					"{id:\"c7\",num:").append(50).append("}," +
					"{id:\"c8\",num:").append(100).append("}," +
					"{id:\"c9\",num:").append(300).append("}]");
			System.out.println("json====="+json);
			MyPrint.responseWrite(json + "\t"+json2);
			return null;
							
	}