canvas实现统计饼图

饼图,canvas
做这个demo的用途:因为现在手机或者多端应用的流行,我们不得不考虑到代码包的大小,所以像这种饼图等我们就不能引入第三方包,否则可能影响性能,我们就将用canvas来实现

canvas实现统计饼图

<!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
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2021年11月20日 上午1:18
下一篇 2021年12月11日 下午5:46

相关推荐

发表评论

登录后才能评论
分享本页
返回顶部