玫瑰仪表盘

最新推荐文章于 2022-01-23 22:30:00 发布

Wvv_

最新推荐文章于 2022-01-23 22:30:00 发布

阅读量194

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_42396332/article/details/107759131

版权

写成简单插件的代码github地址：https://github.com/Onewwway/web-roseChart （插件写得不是很熟练，请多多指教）

简单版：

<!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 style="background-color: #000;">
    <canvas id="canvas" width="1200" height="500"></canvas >

    <script>
        var canvas = document.getElementById('canvas');
        let semicircle = canvas.getContext('2d');
        let data = [{
            name: '鄂',
            percent: 50.2
        },{
            name: '粤',
            percent: 16.6
        },{
            name: '川',
            percent: 10.4
        },{
            name: '京',
            percent: 9.9
        },{
            name: '苏',
            percent: 8.2
        },{
            name: '其他',
            percent: 3.2
        }]
        let start = Math.PI, end = Math.PI;
        // 位移到圆心，方便绘制
        semicircle.translate(600, 300);
        function setChart(){
            for(let i = 0; i < data.length; i++){
                end +=  Math.PI / data.length; // 终止角度

                let limit = 15 - Math.round(data[i].percent / 100 * 15);

                for(let j = 1; j <= 15; j++){
                    if(j > limit){
                        // 开始一条新路径
                        semicircle.beginPath();
                        // 移动到圆心
                        semicircle.moveTo(0, 0);
                        semicircle.fillStyle = "#303030";
                        semicircle.strokeStyle = "#000";
                        semicircle.lineWidth = 2;
                        semicircle.arc(0, 0, 200 - j * 12, start, end);
                        // 闭合路径
                        semicircle.fill();
                        semicircle.closePath();
                        semicircle.stroke();
                    }else if(j == limit){
                        // 开始一条新路径
                        semicircle.beginPath();
                        // 移动到圆心
                        semicircle.moveTo(0, 0);
                        semicircle.fillStyle = "#26E2E3";
                        semicircle.strokeStyle = "#000";
                        semicircle.lineWidth = 2;
                        semicircle.arc(0, 0, 200 - j * 12, start, end);
                        // 闭合路径
                        semicircle.fill();
                        semicircle.closePath();
                        semicircle.stroke();
                    }else{
                        // 开始一条新路径
                        semicircle.beginPath();
                        // 移动到圆心
                        semicircle.moveTo(0, 0);
                        semicircle.fillStyle = "#141414";
                        semicircle.strokeStyle = "#000";
                        semicircle.lineWidth = 2;
                        semicircle.arc(0, 0, 200 - j * 12, start, end);
                        // 闭合路径
                        semicircle.fill();
                        semicircle.closePath();
                        semicircle.stroke();
                    }
                }

                start =  end; // 起始角度
            }
        }
        function setWords(){
            let angle;
            for(let i = 0; i < data.length; i++){
                if(i == 0){
                    angle = Math.PI + Math.PI / data.length / 2;
                }else{
                    angle = Math.PI + Math.PI / data.length / 2 + Math.PI / data.length * i; // 30°
                }
                semicircle.save();
                semicircle.translate(Math.cos(angle) * 220 - 230, Math.sin(angle) * 220);
                semicircle.font = "14px scans-serif";
                semicircle.fillStyle = "#FFF";
                semicircle.fillText(data[i].name, 210, -6);
                semicircle.font = "14px scans-serif";
                semicircle.fillStyle = "#26E2E3";
                semicircle.fillText(data[i].percent + "%", 210, 14);
                semicircle.restore();
            }
        }
        setChart();
        setWords();
    </script>
</body>
</html>

Wvv_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
玫瑰仪表盘

写成简单插件的代码github地址：https://github.com/Onewwway/web-roseChart（插件写得不是很熟练，请多多指教）简单版：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
复制链接

扫一扫