var totalData=[{name:"考研",num:35},{name:"工作",num:86}]; var schollData=[{name:"西南科技大学",num:15},{name:"电子科技大学",num:8},{name:"四川大学",num:4},{name:"西安电子科技大学",num:8}]; var companyData=[{name:"腾讯",num:6},{name:"百度",num:13},{name:"阿里",num:28},{name:"搜狐",num:12},{name:"新浪",num:9},{name:"去哪儿",num:18}]; var colors=["#EEB422","#43CD80"]; var sum = 0; var lastsum=0; window.onload = function(){ var canvas = document.getElementById("cav_pie"); if(canvas==null)return; canvas.height = 300; canvas.width = 300; ctx = canvas.getContext("2d"); sumData(); drawChart(); } //求数据总和 function sumData(){ for(var i=0;i<totalData.length;i++){ sum+=totalData[i].num; }; } //下一个起始 function lastSum(i){ lastsum=0;//重置为0 for (var j = 0; j < i; j++) { lastsum+=totalData[j].num; }; } //画饼图 //半径 var radius=150; function drawChart(){ for (var i = 0; i < totalData.length;i++) { lastSum(i);//上一个结束弧度就是下一个起始弧度 var startAngle= (Math.PI*2)*(lastsum/sum);//起始弧度 lastSum(i+1); var endAngle=(Math.PI*2)*(lastsum/sum);//结束弧度 ctx.save(); ctx.fillStyle=this.colors[i]; ctx.beginPath(); ctx.moveTo(150,150); ctx.arc(150,150,radius,startAngle,endAngle,false); ctx.closePath(); ctx.fill(); ctx.restore(); drawText(startAngle,endAngle,totalData[i].name,(100 * totalData[i].num)/sum); }; } function drawText(s,e,jn,jsm){ //文字的x，y坐标计算 var x = Math.cos((s+e)/2)*(radius / 2)+150; var y = Math.sin((s+e)/2)*(radius / 2)+150; ctx.fillStyle="blue"; ctx.fillText(jn,x,y); ctx.fillStyle="black"; //百分比精确到小数后两位 ctx.fillText(jsm.toFixed(2)+"%",x,y+20); // //绘制由每个饼文字 //ctx.stroke(); } // //绘制文本和线段 // function drawText(s,e,jn,jsm){ // //文字的x，y坐标计算 // var x = Math.cos((s+e)/2)*(radius+60)+200; // var y = Math.sin((s+e)/2)*(radius+60)+200; // ctx.fillStyle="blue"; // ctx.fillText(jn,x,y); // ctx.fillStyle="red"; // //百分比精确到小数后两位 // ctx.fillText((parseInt(jsm*20000)/200)+"%",x,y+20); // //绘制由每个饼指向文字的线段 // ctx.beginPath(); // //各端点坐标由每块的起始弧度和结束弧度求平均后计算得出 // ctx.moveTo(Math.cos((s+e)/2)*radius+200,Math.sin((s+e)/2)*radius+200); // ctx.lineTo( Math.cos((s+e)/2)*(radius+40)+200, Math.sin((s+e)/2)*(radius+40)+200); // ctx.closePath(); // ctx.fillStyle="red"; // ctx.stroke(); // // } // var draw_pie = document.getElementById('draw_pie'); // var draw_pietWidth = draw_pie.innerWidth; // var draw_pieHeight = draw_pie.innerHeight; // canvas.style.top = 0; // canvas.style.left = (viewportWidth - cav_pieas.width) / 2 + "px";
<!DOCTYPE HTML> <html> <head> <title>简单化饼图</title> <meta charset="utf-8"/> </head> <body> <canvas id="cav" width="800" height="800"> 对不起，您的浏览器版本过低，不支持HTML5. </canvas> </body> <script type="text/javascript"> var jsondata=[{name:"技术部",num:95},{name:"研发部",num:3},{name:"市场部",num:50},{name:"攻关部",num:20},{name:"信息产业部",num:35},{name:"宣传部",num:50}]; var colors=["#cb4539","#fec655","#feff63","#2ba54e","#2b81b0","#053249","#053649"]; var sum = 0; var lastsum=0; window.onload = function(){ var canvas = document.getElementById("cav"); if(cav==null)return; ctx = canvas.getContext("2d"); sumData(); drawChart(); } //求数据总和 function sumData(){ for(var i=0;i<jsondata.length;i++){ sum+=jsondata[i].num; }; } //下一个起始 function lastSum(i){ lastsum=0;//重置为0 for (var j = 0; j < i; j++) { lastsum+=jsondata[j].num; }; } //画饼图 //半径 var radius=200; function drawChart(){ for (var i = 0; i < jsondata.length;i++) { lastSum(i);//上一个结束弧度就是下一个起始弧度 var startAngle= (Math.PI*2)*(lastsum/sum);//起始弧度 lastSum(i+1); var endAngle=(Math.PI*2)*(lastsum/sum);//结束弧度 ctx.save(); ctx.fillStyle=this.colors[i]; ctx.beginPath(); ctx.moveTo(400,400); ctx.arc(400,400,radius,startAngle,endAngle,false); ctx.closePath(); ctx.fill(); // ctx.restore(); // drawText(startAngle,endAngle,jsondata[i].name,jsondata[i].num/sum); }; } //绘制文本和线段 function drawText(s,e,jn,jsm){ //文字的x，y坐标计算 var x = Math.cos((s+e)/2)*(radius+60)+400; var y = Math.sin((s+e)/2)*(radius+60)+400; ctx.fillStyle="blue"; ctx.fillText(jn,x,y); ctx.fillStyle="red"; //百分比精确到小数后两位 ctx.fillText((parseInt(jsm*10000)/100)+"%",x,y+20); //绘制由每个饼指向文字的线段 ctx.beginPath(); //各端点坐标由每块的起始弧度和结束弧度求平均后计算得出 ctx.moveTo(Math.cos((s+e)/2)*radius+400,Math.sin((s+e)/2)*radius+400); ctx.lineTo( Math.cos((s+e)/2)*(radius+40)+400, Math.sin((s+e)/2)*(radius+40)+400); ctx.closePath(); ctx.fillStyle="red"; ctx.stroke(); } </script> </html>
另：http://www.html5tricks.com/demo/html5-pie-pyramid-chart/index.html