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>
<!--[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>
</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;
}
运行效果
<div>
<p><a href="http://izixue.com/data/attachment/album/201106/07/090309v8zv8y9detrpqv9m.jpg" target="_blank"><img src="http://izixue.com/data/attachment/album/201106/07/090309v8zv8y9detrpqv9m.jpg" alt=""></a></p> <p><a href="http://izixue.com/data/attachment/album/201106/07/090309v8zv8y9detrpqv9m.jpg" target="_blank"></a></p>
<div>
</div>
</div>
转载于:https://www.cnblogs.com/ctou45/archive/2011/08/05/2128345.html
jquery实现饼图统计图表相关推荐
- 利用c#+jquery+ichartjs生成统计图表
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长! 这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使用纯js 或者建立在一些插件 ...
- FIX:FusionCharts Suite XT 3.19.x
FusionCharts Suite XT:探索 100 多张图表和 2000 多张地图 FusionCharts 提供了 100 多张图表和 2000 多张地图.凭借广泛的文档.一致的 API 和一 ...
- echarts.js降雨量关系图
下载地址基于echarts.js实现的降雨量.流量关系图统计图表,一个jQuery关系图统计图表. dd:
- vue饼图统计_做可交互的统计图表,这套图形语法不容错过
选好可视化 "一图胜千言",是最直观的数据可视化魅力.以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达. 有需求就有市场.数据可视化崭露头角后,各个厂商出备的产品.解决方案,开 ...
- jquery flot pie画饼图
具体效果如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Ty ...
- 可视化框架、Axure原型、大屏可视化、图表组件、图表元件库、统计图表、数据可视化模板、条形图、折线图、散点图、时间轴、仪表盘、饼图、散点图、雷达图、高山图、登录模板、弹窗、弹幕、预警、散点图
可视化框架.数据可视化综合管理平台.大屏可视化.图表组件.图表元件库.统计图表.数据可视化模板.条形图.折线图.散点图.时间轴.仪表盘.饼图.散点图.雷达图.高山图.登录模板.弹窗.弹幕.预警.散点图 ...
- html 圆圈图表插件,利用jquery html5实现图表动画圆形饼图
特效描述:利用jquery html5实现 图表动画 圆形饼图.利用jquery html5实现图表动画圆形饼图 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 *{margin:0; ...
- JS,统计图表大全--三、饼形图(饼图及环形图)
三.饼形图(饼图及环形图) HTML参考 <!DOCTYPE HTML> <html><head><meta charset="utf-8" ...
- 用echarts结合jsp,servlet生成统计图表
一 简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...
最新文章
- [POI 2009] gas 贪心
- python打包exe 之打包sklearn模型中的各种坑及其解决方法。
- 全球多媒体视频内容保护最佳实践
- 斯坦福大学机器学习第三课“多变量线性回归“
- 后台开发常用mysql语句_v1.0
- opencv24-直方图比较
- 菜单黑暗模式UI动画素材模板
- UnicodeDecodeError: 'utf8' codec can't decode byte 0xd1 in position 0: invalid continuation byte问题
- 8.26~8.30-广州软件所-实习工作日记
- Some Sites About .Net
- 高等代数-三-消元法
- java 代码重构 pdf_《重构:改善既有代码的设计》 PDF 下载
- 凯撒密码的超详细讲解
- react-native6.0版本xcode11.2版本ios报错Unrecognized font family 'Ionicons'
- 怎么把Word转PDF格式?分享几种好用的转换方法
- edm邮件html模板,EDM模板使用说明
- Hibernate 映射关系 ---One2One 主键关联
- 对象的高级使用-插入图片对象(转)
- 京剧《赤壁》舌战群儒
- 机器人学笔记(01):1.绪论