canvas实现统计饼图

余倩倩 • 2021年12月1日下午3:48 • 前端大牛 • 阅读 122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <div id="div1"></div>
    <script>
    //数据
    var data={
                title:"饼图分布情况",
                dataList:
                [
                {name:"第一工厂(30%)",rate:0.3,color:"#f60"},
                {name:"第二工厂(30%)",rate:0.3,color:"#64f"},
                {name:"第三工厂(40%)",rate:0.4,color:"#0f6"},
                ]
             }
    //画布
    var cvs=document.createElement("canvas");
    var div1=document.getElementById("div1");
    div1.appendChild(cvs);
    cvs.width=760;
    cvs.height=500;
    cvs.style="display:block;margin:0 auto;background:#eee;";
    var ctx=cvs.getContext("2d");
    //绘制标题
    ctx.font="16px 黑体";
    ctx.textAlign="center";
    ctx.textBaseline="midddle";
    ctx.fillText(data.title,cvs.width/2,25);
    //绘制左边实例图标
    ctx.textAlign="left";
    ctx.font="14px 微软雅黑";
    ctx.textBaseline="bottom";
    for(var i=0;i<data.dataList.length;i++)
    {
        ctx.beginPath();
        ctx.arc(30,50+20*i,10,1.5*Math.PI-0.2*Math.PI,1.5*Math.PI+0.2*Math.PI,false);
        ctx.lineWidth=5;
        ctx.strokeStyle=data.dataList[i].color;
        ctx.stroke();
        ctx.fillText(data.dataList[i].name,45,50+20*i);
    }
    //绘制饼图
    var startAngle=1.5*Math.PI;
    var endAngle,lineAngle;
    for(var j=0;j<data.dataList.length;j++)
    {
        ctx.beginPath();
        ctx.moveTo(500,250);
        endAngle=startAngle+data.dataList[j].rate*2*Math.PI;
        ctx.arc(500,250,100,startAngle,endAngle,false);
        ctx.closePath();
        ctx.fillStyle=data.dataList[j].color;
        ctx.fill();
        startAngle=endAngle;
        lineAngle=endAngle-data.dataList[j].rate*Math.PI-1.5*Math.PI;
        ctx.beginPath();
        ctx.moveTo(500+100*Math.sin(lineAngle),250-100*Math.cos(lineAngle));
        ctx.lineTo(500+120*Math.sin(lineAngle),250-120*Math.cos(lineAngle));
        ctx.textBaseline="midddle";
        if(lineAngle<=Math.PI)
        {
            ctx.lineTo(500+120*Math.sin(lineAngle)+15,250-120*Math.cos(lineAngle));
            ctx.textAlign="left";
            ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)+20,250-120*Math.cos(lineAngle));
        }
        else
        {
            ctx.lineTo(500+120*Math.sin(lineAngle)-15,250-120*Math.cos(lineAngle));
            ctx.textAlign="right";
            ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)-20,250-120*Math.cos(lineAngle));
        }
        ctx.lineWidth=1;
        ctx.strokeStyle=data.dataList[j].color;
        ctx.stroke();
    }
    //生长动画
    var overOver=document.createElement('canvas');
    div1.appendChild(cvsOver);
    cvsOver.width=cvs.width;
    cvsOver.height=cvs.height;
    div1.style.position="relative";
    cvsOver.style.position="absolute";
    cvsOver.style.top=0;
    cvsOver.style.left=0;
    </script>
</body>
</html>
本文来自余倩倩投稿，不代表 PmTemple 立场，如若转载，请注明出处：
。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com