jquery 饼图
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"/><scripttype="text/javascript" src="<%=basePath %>admin/test/bingtu/codebase/jquery-1.3.2.min.js"></script><!--><scripttype="text/javascript" src="codebase/excanvas.compiled.js"></script><!--><scripttype="text/javascript" src="<%=basePath %>admin/test/bingtu/codebase/GooFunc.js"></script><scripttype="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+")");/*转换为json格式*/ var piedate=eval("("+json+")");/*转换为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;}运行效果http://izixue.com/data/attachment/album/201106/07/090309v8zv8y9detrpqv9m.jpg
页:
[1]