3D立体环形百分比进度图表代码

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

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

以下是 3D立体环形百分比进度图表代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D立体环形百分比进度图表代码</title>
</head>
<body>
<center><br><br><br><br><br>
<canvas id="pie1" width="200px" height="200px"></canvas>
<canvas id="pie2"></canvas>
</center>
<script src="js/Charts.js"></script>
<script type="text/javascript">
	new Chart("pie1").ratePie(98);

	var pie=new Chart("pie2");
		pie.ratePie(30);
</script>
</body>
</html>

JS代码(Charts.js):

/** * [html:<canvas id="pie1"></canvas>] * [js:new Chart("pie1").ratePie(60);
	] * author:zhengyong * create:2016-05-11 */
 window.Chart=function(domId){
	var canvas = document.getElementById(domId);
	var ctx = canvas.getContext("2d");
	var W = canvas.width;
	var H = canvas.height;
	var deg=0,new_deg=0,dif=0;
	var text,text_w;
	var R=W<H?W:H;
	//先默认环半径为canvas宽度 var bgR=(R-R/3)/2;
	//内环背景半径 var linkW=R/2-bgR;
	//环宽度=(W/2-内半径) var inW=linkW/3;
	//内环宽度=环宽度*1/3 var outW=linkW*2/3;
	//外环宽度=环宽度*2/3 var inR=bgR+inW/2;
	//内环半径=内半径+内环宽度/2 var outR=bgR+inW+outW/2;
	//外环半径=内半径+内环宽度+外环宽度/2 var $this=this;
	$this.ratePieNoAnimation=function(number){
	deg=360*number/100;
	//底色大 ctx.clearRect(0,0,W,H);
	ctx.beginPath();
	var grd = ctx.createLinearGradient(0,H,W,0);
	//颜色渐变的起始坐标和终点坐标 grd.addColorStop(0,"#74DE1C");
	grd.addColorStop(0.3,"#9DDE12");
	grd.addColorStop(0.6,"#B2ED2E");
	grd.addColorStop(1,"#CBF76C");
	ctx.strokeStyle = grd;
	//生成的颜色块赋值给样式 ctx.lineWidth=outW;
	ctx.arc(W/2,H/2,outR,0,Math.PI*2,false);
	ctx.stroke();
	//底色小 ctx.beginPath();
	var grd = ctx.createLinearGradient(W,0,0,H);
	grd.addColorStop(0,"#74DE1C");
	grd.addColorStop(0.3,"#9DDE12");
	grd.addColorStop(0.6,"#B2ED2E");
	grd.addColorStop(1,"#CBF76C");
	ctx.strokeStyle = grd;
	ctx.lineWidth=inW;
	ctx.arc(W/2,H/2,inR,0,Math.PI*2,false);
	ctx.stroke();
	//圆心背景 ctx.beginPath();
	ctx.fillStyle="#D9E5E5";
	ctx.arc(W/2,H/2,bgR,0,Math.PI*2,false);
	ctx.fill();
	//外层 var r = deg*Math.PI/180;
	ctx.beginPath();
	var grd = ctx.createLinearGradient(0,H,W,0);
	grd.addColorStop(0,"#8BEAF5");
	grd.addColorStop(0.3,"#22A4D4");
	grd.addColorStop(0.6,"#0B72BD");
	grd.addColorStop(1,"#0A5DA0");
	ctx.strokeStyle = grd;
	ctx.lineWidth=outW;
	ctx.arc(W/2,H/2,outR,0-90*Math.PI/180,r-90*Math.PI/180,false);
	ctx.stroke();
	//内层 ctx.beginPath();
	var grd = ctx.createLinearGradient(W,0,0,H);
	grd.addColorStop(0,"#8BEAF5");
	grd.addColorStop(0.3,"#22A4D4");
	grd.addColorStop(0.6,"#0B72BD");
	grd.addColorStop(1,"#0A5DA0");
	ctx.strokeStyle = grd;
	ctx.lineWidth=inW;
	ctx.arc(W/2,H/2,inR,0-90*Math.PI/180,r-90*Math.PI/180,false);
	ctx.stroke();
	ctx.fillStyle="#000";
	ctx.font="bold "+R/4+"px Arial";
	text = Math.floor(deg/360*100)+"%";
	text_w = ctx.measureText(text).width;
	ctx.fillText(text,W/2 - text_w/2,H/2+R/10);
}
;
	$this.ratePie=function(number){
	var i=0;
	var t= setInterval(function(){
	if(i==number){
	clearInterval(t);
}
else{
	number>0?i++:i--;
}
$this.ratePieNoAnimation(i);
	if(i > 100 || i < -100){
	//如果数字太大，取消动画效果 $this.ratePieNoAnimation(number);
	clearInterval(t);
}
}
,2000/(number>0?number:-number));
}
}

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