js、jquery 动态生产 数据饼状图 所占百分比

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

你可能感兴趣的:(html,js,jquery,统计,pie chart)