js、jquery 动态生产 数据饼状图 所占百分比
程序员文章站
2022-03-02 11:46:00
...
<!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/
