JavaScript 绘制饼图的示例
绘制效果
实现代码
JavaScript
varcanvas=document.getElementById("mycanvas");
varw=window.innerWidth;
varh=window.innerHeight;
canvas.height=1000;
canvas.width=1400;
varctx=canvas.getContext('2d');
varpoppable=true;
varslices=[];
functionshadeColor(color,percent){
varf=parseInt(color.slice(1),16),
t=percent<0?0:255,
p=percent<0?percent*-1:percent,
R=f>>16,
G=f>>8&0x00FF,
B=f&0x0000FF;
return"#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
functionpieSlice(oX,oY,r,pos,len,col,data){
this.data=data
this.originX=oX;
this.originY=oY;
this.radius=r;
this.startingRadian=pos;
this.length=len;
this.color=col;
this.highlightedColor=shadeColor(this.color,.6);
this.highlighted=false;
this.popped=false;
this.animationFrame=0;
functionsetColor(c){
this.color=c;
}
}
pieSlice.prototype.displayData=function(){
ctx.fillStyle=this.color;
ctx.fillRect(this.originX-this.radius-40,this.originY-this.radius-35,25,25);
ctx.fillStyle="white";
ctx.font="15pxArial";
ctx.fillText(this.data,this.originX-this.radius-10,this.originY-this.radius-18);
}
pieSlice.prototype.render=function(){
if(!this.highlighted){
ctx.fillStyle=this.color;
ctx.strokeStyle=this.color;
}else{
if(!this.popped&&poppable){
this.displayData();
}
//ctx.fillStyle=this.color;
ctx.fillStyle=this.highlightedColor;
ctx.strokeStyle=this.color;
}
ctx.beginPath();
varxOffset=Math.cos(this.length/2+this.startingRadian)*this.animationFrame;
varyOffset=Math.sin(this.length/2+this.startingRadian)*this.animationFrame;
ctx.moveTo(this.originX+xOffset,this.originY+yOffset);
varx=this.originX+xOffset+this.radius*Math.cos(this.startingRadian);
vary=this.originY+yOffset+this.radius*Math.sin(this.startingRadian);
ctx.lineTo(x,y);
ctx.arc(this.originX+xOffset,this.originY+yOffset,this.radius,this.startingRadian,this.startingRadian+this.length);
if(this.popped){
varfill=ctx.fillStyle;
this.displayData();
ctx.fillStyle=fill;
if(this.animationFrame<30){
this.animationFrame+=2;
}
}else{
if(this.animationFrame>0){
this.animationFrame-=2;
}
}
ctx.closePath();
//ctx.stroke();
//if(this.highlighted){
ctx.fill();
//}
}
pieSlice.prototype.update=function(){
}
functionpieChart(s){
this.slices=s;
}
pieChart.prototype.render=function(){
this.slices.forEach(function(p){
p.render();
});
};
pieChart.prototype.update=function(){
this.slices.forEach(function(p){
p.update();
});
}
//PIEONE
varpie=newpieSlice(700,170,125,0,Math.PI/4,"#FFD1DC",12);
varslice2=newpieSlice(700,170,125,Math.PI/4,Math.PI/4,"#08E8DE");
varslice3=newpieSlice(700,170,125,Math.PI/2,Math.PI/4,"#6699CC");
varslice4=newpieSlice(700,170,125,3*Math.PI/4,Math.PI,"#ADD8E6");
varslice5=newpieSlice(700,170,125,7*Math.PI/4,Math.PI/4,"#B19CD9");
varslices1=[pie,slice2,slice3,slice4,slice5];
varpink=newpieSlice(220,170,125,0,Math.PI/3,"#FF4B4B");
varorange=newpieSlice(220,170,125,Math.PI/3,Math.PI/3,"#FF931B");
varyellow=newpieSlice(220,170,125,2*Math.PI/3,Math.PI/3,"#FFE21B");
vargreen=newpieSlice(220,170,125,3*Math.PI/3,Math.PI/3,"#90E64E");
varblue=newpieSlice(220,170,125,4*Math.PI/3,Math.PI/3,"#6097D9");
varpurple=newpieSlice(220,170,125,5*Math.PI/3,Math.PI/3,"#8365DD");
varredd=newpieSlice(1180,170,125,0,2*Math.PI/3,"#B3989B");
varorangee=newpieSlice(1180,170,125,2*Math.PI/3,1*Math.PI/8,"#C1AEE0");
varbluee=newpieSlice(1180,170,125,19*Math.PI/24,4*Math.PI/24,"#928CE9");
vargreenn=newpieSlice(1180,170,125,23*Math.PI/24,3*Math.PI/8,"#676675");
varpurplee=newpieSlice(1180,170,125,4*Math.PI/3,3*Math.PI/8,"#947D59");
varceci=newpieSlice(1180,170,125,41*Math.PI/24,7*Math.PI/24,"#D994E0");
varslices3=[redd,orangee,bluee,greenn,purplee,ceci];
varslices2=[pink,orange,yellow,green,blue,purple];
varpie1=newpieChart(slices1);
varpie2=newpieChart(slices2);
varpie3=newpieChart(slices3);
varupdate=function(){
pie1.update();
}
varrender=function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
pie1.render();
pie2.render();
pie3.render();
}
varstep=function(){
update();
render();
animate(step);
}
varanimate=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
function(callback){
window.setTimeout(callback,1000/60);
};
slices.push.apply(slices,slices1);
slices.push.apply(slices,slices2);
slices.push.apply(slices,slices3);
canvas.addEventListener("mousemove",function(e){
varx=e.clientX;
vary=e.clientY;
slices.forEach(function(slice){
ctx.beginPath();
varxOffset=Math.cos(slice.length/2+slice.startingRadian)*slice.animationFrame;
varyOffset=Math.sin(slice.length/2+slice.startingRadian)*slice.animationFrame;
ctx.moveTo(slice.originX+xOffset,slice.originY+yOffset);
varxx=slice.originX+xOffset+slice.radius*Math.cos(slice.startingRadian);
varyy=slice.originY+yOffset+slice.radius*Math.sin(slice.startingRadian);
ctx.lineTo(xx,yy);
ctx.arc(slice.originX+xOffset,slice.originY+yOffset,slice.radius,slice.startingRadian,slice.startingRadian+slice.length);
if(ctx.isPointInPath(x,y)){
slice.highlighted=true;
slice.displayData();
}else{
slice.highlighted=false;
}
ctx.closePath();
});
});
canvas.addEventListener("click",function(e){
varx=e.clientX;
vary=e.clientY;
slices.forEach(function(slice){
ctx.beginPath();
varxOffset=Math.cos(slice.length/2+slice.startingRadian)*slice.animationFrame;
varyOffset=Math.sin(slice.length/2+slice.startingRadian)*slice.animationFrame;
ctx.moveTo(slice.originX+xOffset,slice.originY+yOffset);
varxx=slice.originX+xOffset+slice.radius*Math.cos(slice.startingRadian);
varyy=slice.originY+yOffset+slice.radius*Math.sin(slice.startingRadian);
ctx.lineTo(xx,yy);
ctx.arc(slice.originX+xOffset,slice.originY+yOffset,slice.radius,slice.startingRadian,slice.startingRadian+slice.length);
if(ctx.isPointInPath(x,y)){
if(slice.popped){
slice.popped=false;
poppable=true;
}else{
if(poppable){
slice.popped=true;
poppable=false;
}
}
slice.highlighted=false;
}
ctx.closePath();
});
});
//starttheloop
animate(step);
html
以上就是JavaScript绘制饼图的示例的详细内容，更多关于JavaScript绘制饼图的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。