• canvas绘制扇形统计图


    今天偷懒了,把上次的作业代码记录在这里好了。

    绘制简单的扇形统计图需要用到JS插件,绘制完以后的代码是这样的:

    今天有点晚了把代码记录一下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.12.2.js"></script>
    <style>
    *{ margin:0px; padding:0px;}
    body{ text-align:center}
    #can1{ 400px; height:400px;}
    </style>
    </head>
    <body>
    <div style="400px; height:400px; margin:10px auto;">
    <canvas id="can1" width="400" height="400"></canvas>
    </div>
    <script>
    $(function(){
    var canv=document.getElementById("can1");
    var ctx=canv.getContext("2d");
    var num=[300,300,300];
    var col=["#F00","#00f","#060"]
    var j=0,j1=0,j2=0,jiao=0;
    var sun=0;
    for(var i=0;i<num.length;i++){
    sun=sun+num[i];
    }
    for(var i=0;i<num.length;i++){
    j=2*Math.PI*num[i]/sun;
    j2=j1+j;
    ctx.beginPath();
    ctx.fillStyle=col[i];
    ctx.arc(canv.width/2,canv.height/2,120,j1,j2,false);
    ctx.lineTo(canv.width/2,canv.height/2);

    ctx.closePath();

    ctx.fill();
    jiao=j1+j/2;
    ctx.font="20px Arial";
    ctx.fillStyle="#000";
    j1=j1+j;
    }

    })
    </script>

    </body>
    </html>

    好了,这个就是上面图形的代码,但是要加JS哦!

  • 相关阅读:
    什么是ETL?5分钟看完秒懂
    横向滚动 css
    解决echarts中横坐标值显示不全(自动隐藏)问题
    Echarts
    post 二进制流下载文件
    如何停止foreach
    日期格式 js
    cookie 属性
    HTML5 file对象和blob对象的互相转换
    前端图片压缩
  • 原文地址:https://www.cnblogs.com/kulowreidyql/p/5727415.html
Copyright © 2020-2023  润新知