HTML画饼状图

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

相关阅读:
文件上传案例_Socket_测试
 Linux的小整理（入门）
full stack 第一天
 基础考题试题
 shell语法
 网络管理
 图像类
 定时储存
 网络管理
 磁盘管理
原文地址：https://www.cnblogs.com/Decmber/p/4984683.html