zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    _bzoj1061 [Noi2008]志愿者招募【最小费用最大流】
    _bzoj2243 [SDOI2011]染色【树链剖分】
    _bzoj1013 [JSOI2008]球形空间产生器sphere【高斯消元】
    _bzoj1002 [FJOI2007]轮状病毒【瞎搞】
    leetcode 273 Integer to English Words
    leetcode 12 Integer to Roman
    leetcode 1071 Greatest Common Divisor of Strings
    lc6 ZigZag Conversion
    lc13 Roman to Integer
    leetcode 171 Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/Decmber/p/4984683.html
Copyright © 2011-2022 走看看