當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery实现饼图统计图表

發布時間：2023/11/30 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery实现饼图统计图表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JSP頁面:

<pre name="code" class="html"><%@ 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>

<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>
</pre>

從后臺獲取數據

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;
??? ??? ??? ??? ??? ??? ???
??? }

運行效果

轉載于:https://www.cnblogs.com/ctou45/archive/2011/08/05/2128345.html

總結

以上是生活随笔為你收集整理的jquery实现饼图统计图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一场媲美“超女”海选的招聘狂潮
下一篇：解题报告 Valentine‘s se