使用canvas写一个饼状图

最新推荐文章于 2022-08-14 20:01:30 发布

HaiRong_21

最新推荐文章于 2022-08-14 20:01:30 发布

阅读量192

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/HaiRong_21/article/details/108448558

版权

本文将介绍如何利用HTML5的canvas元素结合JavaScript，详细步骤地实现一个动态的饼状图绘制过程，包括设置画布、计算角度、绘制扇形等关键步骤。

摘要由CSDN通过智能技术生成

使用canvas写一个饼状图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id='canvas' width='800' height='400' style="border: 1px solid red;"></canvas>

    <script>
        let data = [
            { title: "服饰1", money: 400 },
            { title: "服饰2", money: 300 },
            { title: "服饰3", money: 400 },
            { title: "服饰4", money: 200 },
            { title: "服饰5", money: 500 },
            { title: "服饰6", money: 180 },
            { title: "服饰7", money: 500 }]

        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#canvas");
        let ctx = canvas.getContext("2d");
        let r = 100;

        let money = function (obj, sum) {
            for (let i = 0; i < obj.length; i++) {
                sum += data[i].money
                
            }
            return sum;
        }
        let totalmoney = money(data, 0);

        let nowsum = 0;
        let start = 0;
        let end = 0;
        let R = 100;
        let i=0;
        data.forEach(function (item) {
            ctx.beginPath()
            nowsum += item.money;
            end = (nowsum / totalmoney) 
            ctx.moveTo(150, 150);
            ctx.arc(150, 150, R, start*Math.PI*2, end*Math.PI*2)
            start = end;
            //产生随机颜色
            ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
            ctx.rect(350,5+(35*i),30,30);
            ctx.font="14px 黑体"
            ctx.fillText(item.title,400,25+(35*i))
            ctx.strokeStyle = "gray"
            ctx.fill();
            ctx.stroke();
            i++;
        })
    </script>
</body>

</html>

HaiRong_21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas写一个饼状图

使用canvas写一个饼状图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
复制链接

扫一扫