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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。