根据数据绘制饼状图

最新推荐文章于 2023-08-25 10:39:04 发布

m0_38027483

最新推荐文章于 2023-08-25 10:39:04 发布

阅读量448

点赞数

本文链接：https://blog.csdn.net/m0_38027483/article/details/82634381

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600" height="600" style="border: 1px solid #cccccc"></canvas>
</body>
</html>
<script>
    var ctx = document.querySelector('canvas').getContext('2d');
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;


    /*
    * 45个程序员
    * 10-20  3人
    * 20-25  15人
    * 25-30  15人
    * 30-35  12人
    * */
    var data = [3,15,15,12];

    var angleList = [];

    var total = 0;
    data.forEach(function (item,i) {
        total +=item;
    })

    console.log(total);

    data.forEach(function (item,i) {
        var angle = item / total * 2 * Math.PI;
        angleList.push(angle);
    })


    var random = function () {
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        return 'rgb('+r+','+g+','+b+')';
    }
    //绘制饼图
    //起始弧度--->

    var startAngle = 0;
    angleList.forEach(function (item,i) {
        //结束弧度
        var endAngle = item + startAngle;
        ctx.beginPath();
        ctx.moveTo(w/2,h/2);
        ctx.arc(w/2,h/2,150,startAngle,endAngle);
        ctx.fillStyle = random();
        ctx.fill();

        //纪录下一个开始的弧度 = 上一个结束的弧度
        startAngle = endAngle;
    })
</script>

m0_38027483

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据数据绘制饼状图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;canvas wi
复制链接

扫一扫