<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pulse Results</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, i
nitial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, target-densitydpi=medium-dpi" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<title>Pulse Results</title>
<link rel="Stylesheet" href="main.css" />
<link rel="Stylesheet" href="jquery.jqplot.min.css" />
<style type="text/css">
.navbar-fixed-bottom {margin-right:0;margin-left:0}
#user { display:none; margin-top:15px; margin-right: 10px;}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="result_show cf" style="height: 200px;">
<div id="result_pie" style=" width: 160px; height: 170px; position: relative; float: left;">
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
var s1 = [
['a', 10], ['b', 36], ['c', 20], ['d', 20], ['e', 14]
];
var plot3 = jQuery.jqplot('result_pie', [s1], {
axis: {
pad:0
},
grid: {
background: '#fafafa',
drawBorder: false,
shadow: false
},
seriesColors: ['#D74D4B', '#FC6763', '#F09571', '#FFD48F', '#FFEDAA'],
seriesDefaults: {
lineWidth: 1,
// make this a donut chart.
renderer: jQuery.jqplot.DonutRenderer,
rendererOptions: {
diameter: 140,
innerDiameter: 80,
sliceMargin: 2,
// Pies and donuts can start at any arbitrary angle.
startAngle: -90,
showDataLabels: false
},
shadow: false,
showLine: true
}
});
});
</script>
</div>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.donutRenderer.min.js"></script>
</body>
</html>
http://www.jscharts.com/how-to-use-pie-charts
更多内容 请参考我的个人博客 http://ismartstudio.com/
- 大小: 5.6 KB
分享到:
相关推荐
jquery 实现的一款报表,可以在页面中展示,包括常用的饼状图、柱状图等。jsp、asp等都可以使用,在页面中展示生成统计图等,非常实用,使用也很简单,看一眼估计就懂
挺不错的jQuery饼状图插件,装载数据也是非常方便的直接输出在table表格中,然后再绘出饼状图 展现百分比,鼠标放上去会显示想要比例的数据,还是很不错的,虽然没有Highcharts.js功能那么 强,至少饼状图是够用了...
一款可以动态添加数据的(后台读取数据)自动生成饼状3D百分比图的详细实例,经过测试,直接可以拿来运用的,无需更改。
jquery 实现的一款报表,可以在页面中展示,包括常用的饼状图、柱状图等。jsp、asp等都可以使用,在页面中展示生成统计图等,非常实用,使用也很简单,看一眼估计就懂。
jquery曲线图,饼状图插件
基于jquery json制作的饼状图数据图表特效源码.zip
jquery实现饼状图效果
这是一款基于jQuery HTML5实现的可以在页面中渲染出带动画效果的SVG饼状图形,适合用于制作进度显示,加载进度等饼状图形进度条特效。 js代码 [removed][removed] [removed][removed] [removed] $(document)....
之前我们分享过很多基于HTML5和CSS3的网页图表应用,很多都包含饼状图,非常实用。今天我们要再来分享一款jQuery饼状图表插件,我们可以自定义图表数据,并且还可以定义饼状图每一个数据区域的颜色。
js jquery 实现实现柱状图,饼状图,折线图,平面图,立体三维图,自己实现的例子,还有很多官方例子,随便选用,只需要填写相关字段,和对应数值就可实现图表
jquery动态分页数据获取代码 jquery动态分页数据获取代码
jQuery饼状图比例分布图代码是一款基于jquery.ba-resize.min.js、jquery.gvChart- 1.0.1.min.js、jquery.1.4.2.js和jsapi.js制作的用于网站会员数据统计的网页代码。有会员地区分布、会员性别分步2个 饼状图,鼠标...
js jquery 实现实现柱状图,饼状图,折线图,平面图,立体三维图,自己实现的例子,还有很多官方例子,随便选用,只需要填写相关字段,和对应数值就可实现图表
jQuery动态饼状图表 多色块图表数据区域 jQuery动态饼状图表 多色块图表数据区域
jQuery动态分页数据获取代码是一款动态数据获取插件paging。
jquery饼状图效果
用jQuery生成漂亮的饼状图、柱状图、折线图,操作方便实用!
这是一款使用html5 canvas和jQuery制作的动态饼状图表插件。该图表插件可以通过鼠标查看每一饼块的所占比例大小,使用十分方便。