下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】纯HTML5Canvas实现的饼图
基本思路：主要是利用HTML5Canvas实现饼图绘制，绘制弧度的API主要是使用context.arc与lineto两个API。实现的功能有：1.支持标签Legend显示或者隐藏2.首次载入动画效果3.鼠标tooltip效果4.自定义饼图大小与是否添加文字效果如下：调用代码：<html><head><metahttp-equiv="X-UA-Compatible"content="chrome=IE8"><scriptsrc="js/fishcomponent.js"></script><scriptsrc="js/pie.js"></script><title>MyDemo1</title> <script> window.onload=function(){ varcanvas=document.getElementById("pie_canvas"); varseriesData=[{name:"apples",value:150,color:"RGBA(255,0,0,1)"}, {name:"orange",value:100,color:"RGBA(255,255,0,1)"}, {name:"banana",value:80,color:"RGBA(255,0,255,1)"}, {name:"peaches",value:60,color:"RGBA(0,255,255,1)"}, {name:"strawberries",value:40,color:"RGBA(0,127,255,1)"}] varconfig={ width:600, height:400, series:seriesData, canvas:canvas, unit:"kg", title:"FruitSales", tooltips:{ enable:true }, animation:{ enable:true }, legend:{ enable:true }, text:{ enable:true }, }; pieChart.initSettings(config); pieChart.render(); } </script></head><body><h2>PieChartDemo</h2><divid="my_container"style="width:600px;height:500px;"> <canvasid="pie_canvas"></canvas></div><divid="btn-group"> <buttontype="button"id="clear-button">ClearPlot</button> <buttontype="button"id="refresh-button">DrawPlot</button></div></body></html>饼图JS的代码：varpieChart={width:600,height:400,series:[],unit:"kg",chartCanvas:null,selectable:true,title:"PieChart",legend:{ enable:true},edge:{ width:50, height:50},animation:{ enable:true, animCanvas:null, hh:1,//trickishere!!foranimationplay pctx:null},tooltips:{ enable:true, tooltipCanvas:null, ttContext:null, index:-1},circle:{ cx:0, cy:0, radius:0 },text:{ enable:false, content:[]},initSettings:function(config){ this.chartCanvas=config.canvas; this.chartCanvas.width=config.width; this.chartCanvas.height=config.height;this.width=config.width;this.height=config.height;this.series=config.series;this.title=config.title;this.unit=config.unit;if(config.tooltips!=undefined){ this.tooltips.enable=config.tooltips.enable; }if(config.animation!=undefined){ this.animation.enable=config.animation.enable; }if(config.legend!=undefined){ this.legend.enable=config.legend.enable; }if(config.text!=undefined){ this.text.enable=config.text.enable;}},render:function(){ //initializationcircle this.circle.cx=this.width/2; this.circle.cy=this.height/2; this.circle.radius=Math.min(this.width/2,this.height/2)-Math.max(this.edge.width,this.edge.height); varctx=null; if(this.animation.enable){ this.animation.animCanvas=document.createElement("canvas"); this.animation.animCanvas.width=this.width; this.animation.animCanvas.height=this.height; ctx=this.animation.animCanvas.getContext("2d"); }else{ ctx=this.chartCanvas.getContext("2d"); this.renderBorder(ctx); } if(this.circle.radius<=0){ ctx.strokeText("Cannotreaderthechart,Circleistoosmall."); return; } //draweacharcaccordingtodataseries varsum=0; varnums=this.series.length; for(vari=0;i<nums;i++){ sum+=this.series[i].value; } //drawtitle ctx.font='18ptCalibri'; ctx.fillText(this.title,this.width/2-this.edge.width,30); ctx.save(); vardeltaArc=0; for(vari=0;i<nums;i++){ varprecent=this.series[i].value/sum; this.renderPie(ctx,i,precent,deltaArc); deltaArc+=2*Math.PI*precent; } ctx.restore(); //addblurshadow ctx.save(); ctx.shadowColor="black"; ctx.shadowOffsetX=0; ctx.shadowOffsetY=0; ctx.shadowBlur=10; ctx.beginPath(); ctx.arc(this.circle.cx,this.circle.cy,this.circle.radius,0,Math.PI*2,false); ctx.closePath(); ctx.lineWidth=1; ctx.strokeStyle="RGBA(127,127,127,1)"; ctx.stroke(); ctx.restore(); //renderlegend ctx.save(); this.renderLegend(ctx,sum); ctx.restore(); //playanimation if(this.animation.enable){ varparent=this; this.animation.pctx=this.chartCanvas.getContext("2d"); this.renderBorder(this.animation.pctx); setTimeout(function(){parent.playAnimation(parent);},1000/20); }},showTooltips:function(loc,ctx){ if(!this.tooltips.enable){ return; } vardx=loc.x-this.width/2; vardy=loc.y-this.height/2; vardis=Math.floor(Math.sqrt(dx*dx+dy*dy)); if(dis<=this.circle.radius){ //drawtooltiptext varangle=Math.atan2(dy,dx); if(angle<=0){ //if[-Math.PI,0],makeit[Math.PI,2*Math.PI] angle=angle+2*Math.PI; } varsum=0; varnums=this.series.length; for(vars=0;s<nums;s++){ sum+=this.series[s].value; } vardeltaArc=0; varindex=0; for(vari=0;i<nums;i++){ varprecent=this.series[i].value/sum; deltaArc+=2*Math.PI*precent; if(angle<=deltaArc){ index=i; break; } } if(this.tooltips.tooltipCanvas==null){ this.tooltips.tooltipCanvas=document.createElement("canvas"); this.tooltips.ttContext=this.tooltips.tooltipCanvas.getContext("2d"); this.tooltips.tooltipCanvas.width=150; this.tooltips.tooltipCanvas.height=100; } //onlydrawonce //if(index==this.tooltips.index){ // return; //} this.clearTooltips(ctx); this.tooltips.index=index; varm_context=this.tooltips.ttContext; m_context.save(); m_context.clearRect(0,0,this.tooltips.tooltipCanvas.width,this.tooltips.tooltipCanvas.height); m_context.lineWidth=2; m_context.strokeStyle=this.series[index].color; m_context.fillStyle="RGBA(255,255,255,0.7)"; //m_context.strokeRect(2,2,this.tooltips.tooltipCanvas.width-4,this.tooltips.tooltipCanvas.height-4); //m_context.fillRect(2,2,this.tooltips.tooltipCanvas.width-4,this.tooltips.tooltipCanvas.height-4); m_context.roundRect(2,2,this.tooltips.tooltipCanvas.width-4,this.tooltips.tooltipCanvas.height-4,5,true,true); m_context.font="14pxArial"; m_context.fillStyle="RGBA(0,0,0,1)"; m_context.fillText("Index:"+(index+1),5,20); m_context.fillText(this.series[index].name+":"+this.series[index].value+this.unit,5,40); m_context.fillText(this.series[index].precent,5,60); m_context.restore(); //maketool-tiprectangleisalwaysvisible if((loc.x+this.tooltips.tooltipCanvas.width)>this.width){ loc.x=loc.x-this.tooltips.tooltipCanvas.width; } if((loc.y-this.tooltips.tooltipCanvas.height)<=0){ loc.y=loc.y+this.tooltips.tooltipCanvas.height; } ctx.drawImage(this.tooltips.tooltipCanvas,0,0,this.tooltips.tooltipCanvas.width,this.tooltips.tooltipCanvas.height, loc.x,loc.y-this.tooltips.tooltipCanvas.height,this.tooltips.tooltipCanvas.width,this.tooltips.tooltipCanvas.height); }else{ this.tooltips.index=-1; this.clearTooltips(ctx); }},clearTooltips:function(ctx){ ctx.clearRect(0,0,this.width,this.height); this.renderBorder(ctx); ctx.drawImage(this.animation.animCanvas,0,0,this.width,this.height,0,0,this.width,this.height);},renderBorder:function(ctx){ ctx.save(); ctx.fillStyle="white"; ctx.strokeStyle="black"; ctx.fillRect(0,0,this.width,this.height); ctx.strokeRect(0,0,this.width,this.height); ctx.restore();},renderPie:function(ctx,index,precent,deltaArc){ varendAngle=deltaArc+2*Math.PI*precent; ctx.beginPath(); ctx.arc(this.circle.cx,this.circle.cy,this.circle.radius,deltaArc,endAngle,false); ctx.moveTo(this.circle.cx,this.circle.cy); ctx.lineTo(this.circle.cx+this.circle.radius*Math.cos(deltaArc),this.circle.cy+this.circle.radius*Math.sin(deltaArc)); ctx.lineTo(this.circle.cx+this.circle.radius*Math.cos(endAngle),this.circle.cy+this.circle.radius*Math.sin(endAngle)); ctx.lineTo(this.circle.cx,this.circle.cy); ctx.closePath(); ctx.fillStyle=this.series[index].color; ctx.fill(); //rendertextcontent if(this.text.enable){ varhalfEndAngle=deltaArc+Math.PI*precent; varhx=this.circle.cx+this.circle.radius*Math.cos(halfEndAngle); varhy=this.circle.cy+this.circle.radius*Math.sin(halfEndAngle); ctx.beginPath(); ctx.moveTo(hx,hy); varlinePos=(hx<this.circle.cx)?(hx-this.edge.width):(hx+this.edge.width); ctx.lineTo(linePos,hy); ctx.closePath(); ctx.strokeStyle="black"; ctx.stroke(); vartextPos=(hx<this.circle.cx)?(hx-this.edge.width*2):(hx+this.edge.width); precent=Math.round(precent*100)/100; varsize=this.text.content.length; vartipStr=(size>index)?this.text.content[index]:this.series[index].name+":"+(precent*100).toFixed(0)+"%"; ctx.font='10ptCalibri'; ctx.fillStyle="black"; ctx.fillText(tipStr,textPos,hy); }},renderLegend:function(ctx,sum){ if(!this.legend.enable)return; varnums=this.series.length; ctx.font='10ptCalibri'; varpos=(this.width/2>(this.circle.radius+50))?50:(this.circle.cx-this.circle.radius); for(vari=0;i<nums;i++){ varx=this.series[i].value/sum; x=Math.round(x*100)/100; vartipStr=this.series[i].name+":"+(x*100).toFixed(0)+"%"; this.series[i].precent=tipStr; ctx.fillStyle=this.series[i].color; ctx.fillRect(pos-40,20*i+10,10,10); ctx.fillStyle="black"; ctx.fillText(tipStr,pos-25,20*i+20); } },playAnimation:function(parent){ if(parent.animation.hh<parent.height){ parent.animation.pctx.save(); parent.animation.pctx.globalAlpha=0.5; parent.animation.pctx.clearRect(0,0,parent.width,parent.height); parent.renderBorder(parent.animation.pctx); p
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 100以内加减法竖式计算质量作业口算题大全附答案
- 资产转让合同解除通知函
- 营养师多选题附有答案
- 人工智能在远程医疗诊断中的应用前景
- 网络文学对传统文学的创新与影响研究
- 小班新生开学方案与措施教案
- 2024-2034年中国麻醉剂行业市场全景监测及投资前景展望报告
- 2024-2034年中国四川省轨道交通行业投资分析及发展战略咨询报告
- 2024-2034年中国金属档案柜行业市场现状分析及竞争格局与投资发展研究报告
- 2024-2034年中国云his行业市场全景调研及投资价值评估咨询报告
- JGJ_T231-2021建筑施工承插型盘扣式钢管脚手架安全技术标准（高清-最新版）
- 高端礼品店会员制度策划
- 婴儿胆汁淤积症ppt课件
- 大金铜管管径对照表
- 废旧电池回收协议
- 我和鸟儿的故事说课设计
- 员工工作执行力考核规定
- 第2章 锌锰电池
- 焊接工艺规程及工艺评定
- 采矿工程专业毕业答辩评分标准模版
- 新人教版五年级下册数学期末综合考试题(共8套)及答案
评论
0/150
提交评论