当前位置：网站首页>canvas--饼状图

canvas--饼状图

2022-08-02 03:22:00 【cjx177187】

<body>

    <style>

        #box {

            border: 1px solid black;

        }

    </style>

    <canvas id="box" width="600" height="600"></canvas>

    <script>

        var canvas = document.querySelector("#box")

        var pen = canvas.getContext("2d")

        var deg = Math.PI / 180

        //假数据

        var arr = [{

                name: "clothes",

                money: 8000

            },

            {

                name: "car",

                money: 1580

            },

            {

                name: "eat",

                money: 5790

            },

            {

                name: "cash",

                money: 4090

            },

            {

                name: "foot",

                money: 2439

            },

        ]

        //总价

        arr.tatol = 0

        for (let i = 0; i < arr.length; i++) {

            arr.tatol = arr.tatol + arr[i].money

        }

        var stardeg = 0

        arr.forEach(el => {

            pen.beginPath()

            var r1 = 200

            //随机颜色

            var r = parseInt(Math.random() * 255)

            var g = parseInt(Math.random() * 255)

            var b = parseInt(Math.random() * 255)

            pen.fillStyle = `rgb(${ r},${ g},${ b})`

            //求出每个money的占比

            var angle = (el.money / arr.tatol) * 360

            //利用占比来画圆弧

            pen.arc(300, 300, r1, stardeg * deg, (stardeg + angle) * deg)

            //将圆弧与圆心相连接，形成扇形

            pen.lineTo(300, 300)

            //给每个扇形添加数组的name

            var y1 = 300 + Math.sin((stardeg + angle) * deg-angle*deg/2 ) *( r1+30)

            var x1 = 300 + Math.cos((stardeg + angle) * deg-angle*deg/2 ) * (r1+30)

            pen.fillText(`${ el.name}`, x1, y1)

            stardeg = stardeg + angle

            pen.fill()

            pen.stroke()

        });

    </script>

</body>

 

原网站

版权声明
本文为[cjx177187]所创，转载请带上原文链接，感谢
https://blog.csdn.net/cjx177187/article/details/125954254

边栏推荐

猜你喜欢

随机推荐