简单canvas制作饼状图

最新推荐文章于 2022-08-06 18:43:38 发布

zhrookie

最新推荐文章于 2022-08-06 18:43:38 发布

阅读量2k

点赞数 1

分类专栏： html5和css3 文章标签： canvas js

本文链接：https://blog.csdn.net/zhrookie/article/details/54311203

版权

html5和css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>饼状图</title>
</head>
<body>
    <canvas id="myCanvas" width="700" height="600" style="border: 1px solid #ccc;"></canvas>
    <script>
        var c=document.getElementById('myCanvas');
        var cd=c.getContext('2d');
        var data_arr=[0.1,0.25,0.5,0.15],   //权重
            color_arr=['blueviolet',"#FFAA00","#00AABB","#FF4400"], //定义数据对应的颜色
            text_arr=["第一季度","第二季度","第三季度","第四季度"]  //定义数据对应的季度
        var oPi=Math.PI*2;
        //圆的起始位置
        var startAgl=0;
        //圆的结束位置
        var agl;
        for(var i=0;i<data_arr.length;i++){
            //console.log(data_arr[i],text_arr[i],color_arr[i]);
            //绘制饼图
            agl=data_arr[i]*oPi+startAgl;
            cd.fillStyle=color_arr[i];
            cd.beginPath();
            cd.moveTo(300,300);
            cd.arc(300,300,150,startAgl,agl,false);
            cd.lineTo(300,300);
            cd.stroke();
            cd.fill();
            startAgl=agl;
            console.log(startAgl);
            //绘制图例
            cd.fillRect(480,50+18*i,16,16);
            cd.fillStyle="#000";
            cd.fillText(text_arr[i],500,62+18*i);
        }
    </script>
</body>
</html>