EASY饼图数据统计Jquery插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 EASY饼图数据统计Jquery插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EASY饼图数据统计Jquery插件</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript" src="js/jquery.easy-pie-chart.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.easy-pie-chart.css" media="screen">

<script type="text/javascript">
	var initPieChart = function() {
		$('.percentage').easyPieChart({
			animate: 1000
		});
		$('.percentage-light').easyPieChart({
			barColor: function(percent) {
				percent /= 100;
				return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)";
			},
			trackColor: '#666',
			scaleColor: false,
			lineCap: 'butt',
			lineWidth: 15,
			animate: 1000
		});

		$('.updateEasyPieChart').on('click', function(e) {
		  e.preventDefault();
		  $('.percentage, .percentage-light').each(function() {
			var newValue = Math.round(100*Math.random());
			$(this).data('easyPieChart').update(newValue);
			$('span', this).text(newValue);
		  });
		});
	};
</script>

</head>
<body onLoad="initPieChart();">

        <div class="container">
            <h1>EASY饼图</h1>
            <div class="chart">
                <div class="percentage" data-percent="55"><span>55</span>%</div>
                <div class="label">新的访问</div>
            </div>
            <div class="chart">
                <div class="percentage" data-percent="46"><span>46</span>%</div>
                <div class="label">跳出率</div>
            </div>
            <div class="chart">
                <div class="percentage" data-percent="92"><span>92</span>%</div>
                <div class="label">服务器负载</div>
            </div>
            <div class="chart">
                <div class="percentage" data-percent="84"><span>752</span>MB</div>
                <div class="label">使用的RAM</div>
            </div>
            <div style="clear:both;"></div>
            <div class="dark">
                <div class="chart">
                    <div class="percentage-light" data-percent="55"><span>55</span>%</div>
                    <div class="label">新的访问</div>
                </div>
                <div class="chart">
                    <div class="percentage-light" data-percent="46"><span>46</span>%</div>
                    <div class="label">跳出率</div>
                </div>
                <div class="chart">
                    <div class="percentage-light" data-percent="92"><span>92</span>%</div>
                    <div class="label">服务器负载</div>
                </div>
                <div class="chart">
                    <div class="percentage-light" data-percent="84"><span>752</span>MB</div>
                    <div class="label">使用的RAM</div>
                </div>
                <div style="clear:both;"></div>
            </div>

            <p><a href="#" class="button updateEasyPieChart">更新饼图</a></p>

        </div>
</body>
</html>

JS代码(jquery.easy-pie-chart.js):

// Generated by CoffeeScript 1.3.3/*Easy pie chart is a jquery plugin to display simple animated pie charts for only one valueDual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.Built on top of the jQuery library (http://jquery.com)@source:http://github.com/rendro/easy-pie-chart/@autor:Robert Fleischmann@version:1.0.1Inspired by:http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script*/
(function(){
	(function($){
	$.easyPieChart = function(el,options){
	var addScaleLine,animateLine,drawLine,easeInOutQuad,renderBackground,renderScale,renderTrack,_this = this;
	this.el = el;
	this.$el = $(el);
	this.$el.data("easyPieChart",this);
	this.init = function(){
	var percent;
	_this.options = $.extend({
}
,$.easyPieChart.defaultOptions,options);
	percent = parseInt(_this.$el.data('percent'),10);
	_this.percentage = 0;
	_this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
	_this.$el.append(_this.canvas);
	if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null){
	G_vmlCanvasManager.initElement(_this.canvas);
}
_this.ctx = _this.canvas.getContext('2d');
	_this.ctx.translate(_this.options.size / 2,_this.options.size / 2);
	_this.$el.addClass('easyPieChart');
	_this.$el.css({
	width:_this.options.size,height:_this.options.size,lineHeight:"" + _this.options.size + "px"}
);
	_this.update(percent);
	return _this;
}
;
	this.update = function(percent){
	if (_this.options.animate === false){
	return drawLine(percent);
}
else{
	return animateLine(_this.percentage,percent);
}
}
;
	renderScale = function(){
	var i,_i,_results;
	_this.ctx.fillStyle = _this.options.scaleColor;
	_this.ctx.lineWidth = 1;
	_results = [];
	for (i = _i = 0;
	_i <= 24;
	i = ++_i){
	_results.push(addScaleLine(i));
}
return _results;
}
;
	addScaleLine = function(i){
	var offset;
	offset = i % 6 === 0 ? 0:_this.options.size * 0.017;
	_this.ctx.save();
	_this.ctx.rotate(i * Math.PI / 12);
	_this.ctx.fillRect(_this.options.size / 2 - offset,0,-_this.options.size * 0.05 + offset,1);
	return _this.ctx.restore();
}
;
	renderTrack = function(){
	var offset;
	offset = _this.options.size / 2 - _this.options.lineWidth / 2;
	if (_this.options.scaleColor !== false){
	offset -= _this.options.size * 0.08;
}
_this.ctx.beginPath();
	_this.ctx.arc(0,0,offset,0,Math.PI * 2,true);
	_this.ctx.closePath();
	_this.ctx.strokeStyle = _this.options.trackColor;
	_this.ctx.lineWidth = _this.options.lineWidth;
	return _this.ctx.stroke();
}
;
	renderBackground = function(){
	if (_this.options.scaleColor !== false){
	renderScale();
}
if (_this.options.trackColor !== false){
	return renderTrack();
}
}
;
	drawLine = function(percent){
	var offset;
	renderBackground();
	_this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent):_this.options.barColor;
	_this.ctx.lineCap = _this.options.lineCap;
	offset = _this.options.size / 2 - _this.options.lineWidth / 2;
	if (_this.options.scaleColor !== false){
	offset -= _this.options.size * 0.08;
}
_this.ctx.save();
	_this.ctx.rotate(-Math.PI / 2);
	_this.ctx.beginPath();
	_this.ctx.arc(0,0,offset,0,Math.PI * 2 * percent / 100,false);
	_this.ctx.stroke();
	return _this.ctx.restore();
}
;
	animateLine = function(from,to){
	var currentStep,fps,steps;
	fps = 30;
	steps = fps * _this.options.animate / 1000;
	currentStep = 0;
	_this.options.onStart.call(_this);
	_this.percentage = to;
	if (_this.animation){
	clearInterval(_this.animation);
	_this.animation = false;
}
return _this.animation = setInterval(function(){
	_this.ctx.clearRect(-_this.options.size / 2,-_this.options.size / 2,_this.options.size,_this.options.size);
	renderBackground.call(_this);
	drawLine.call(_this,[easeInOutQuad(currentStep,from,to - from,steps)]);
	currentStep++;
	if ((currentStep / steps) > 1){
	clearInterval(_this.animation);
	_this.animation = false;
	return _this.options.onStop.call(_this);
}
}
,1000 / fps);
}
;
	easeInOutQuad = function(t,b,c,d){
	t /= d / 2;
	if (t < 1){
	return c / 2 * t * t + b;
}
else{
	return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
}
;
	return this.init();
}
;
	$.easyPieChart.defaultOptions ={
	barColor:'#ef1e25',trackColor:'#f2f2f2',scaleColor:'#dfe0e0',lineCap:'round',size:110,lineWidth:3,animate:false,onStart:$.noop,onStop:$.noop}
;
	$.fn.easyPieChart = function(options){
	return $.each(this,function(i,el){
	var $el;
	$el = $(el);
	if (!$el.data('easyPieChart')){
	return $el.data('easyPieChart',new $.easyPieChart(el,options));
}
}
);
}
;
	return void 0;
}
)(jQuery);
}
).call(this);

CSS代码(style.css):

body{font:13px/1.4 'Helvetica Neue','Helvetica','Arial',sans-serif;color:#333;}
.container{width:520px;margin:auto;}
h1{border-bottom:1px solid #d9d9d9;}
a{color:#be2221;text-decoration:none;}
.chart{float:left;margin:10px;}
.percentage,.label{text-align:center;color:#333;font-weight:100;font-size:1.2em;margin-bottom:0.3em;}
.credits{padding-top:0.5em;clear:both;color:#999;}
.credits a{color:#333;}
.dark{background:#333;}
.dark .percentage-light,.dark .label{text-align:center;color:#999;font-weight:100;font-size:1.2em;margin-bottom:0.3em;}
.button{-webkit-box-shadow:inset 0 0 1px #000,inset 0 1px 0 1px rgba(255,255,255,0.2),0 1px 1px -1px rgba(0,0,0,.5);-moz-box-shadow:inset 0 0 1px #000,inset 0 1px 0 1px rgba(255,255,255,0.2),0 1px 1px -1px rgba(0,0,0,.5);box-shadow:inset 0 0 1px #000,inset 0 1px 0 1px rgba(255,255,255,0.2),0 1px 1px -1px rgba(0,0,0,.5);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:6px 20px;font-weight:bold;text-transform:uppercase;display:block;margin:auto;max-width:200px;text-align:center;background-color:#5c5c5c;background-image:-moz-linear-gradient(top,#666666,#4d4d4d);background-image:-ms-linear-gradient(top,#666666,#4d4d4d);background-image:-webkit-gradient(linear,0 0,0 100%,from(#666666),to(#4d4d4d));background-image:-webkit-linear-gradient(top,#666666,#4d4d4d);background-image:-o-linear-gradient(top,#666666,#4d4d4d);background-image:linear-gradient(top,#666666,#4d4d4d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#4d4d4d',GradientType=0);color:#ffffff;text-shadow:0 1px 1px #333333;}
.button:hover{color:#ffffff;text-decoration:none;background-color:#616161;background-image:-moz-linear-gradient(top,#6b6b6b,#525252);background-image:-ms-linear-gradient(top,#6b6b6b,#525252);background-image:-webkit-gradient(linear,0 0,0 100%,from(#6b6b6b),to(#525252));background-image:-webkit-linear-gradient(top,#6b6b6b,#525252);background-image:-o-linear-gradient(top,#6b6b6b,#525252);background-image:linear-gradient(top,#6b6b6b,#525252);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b',endColorstr='#525252',GradientType=0);}
.button:active{background-color:#575757;background-image:-moz-linear-gradient(top,#616161,#474747);background-image:-ms-linear-gradient(top,#616161,#474747);background-image:-webkit-gradient(linear,0 0,0 100%,from(#616161),to(#474747));background-image:-webkit-linear-gradient(top,#616161,#474747);background-image:-o-linear-gradient(top,#616161,#474747);background-image:linear-gradient(top,#616161,#474747);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161',endColorstr='#474747',GradientType=0);-webkit-transform:translate(0,1px);-moz-transform:translate(0,1px);-ms-transform:translate(0,1px);-o-transform:translate(0,1px);transform:translate(0,1px);}
.button:disabled{background-color:#dddddd;background-image:-moz-linear-gradient(top,#e7e7e7,#cdcdcd);background-image:-ms-linear-gradient(top,#e7e7e7,#cdcdcd);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e7e7e7),to(#cdcdcd));background-image:-webkit-linear-gradient(top,#e7e7e7,#cdcdcd);background-image:-o-linear-gradient(top,#e7e7e7,#cdcdcd);background-image:linear-gradient(top,#e7e7e7,#cdcdcd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e7',endColorstr='#cdcdcd',GradientType=0);color:#939393;text-shadow:0 1px 1px #fff;}

附件:下载该文件资源,减少时间成本(增值服务)