js简单插件（饼形图）

最新推荐文章于 2022-07-23 07:29:32 发布

小栗子的普

最新推荐文章于 2022-07-23 07:29:32 发布

阅读量780

点赞数 1

分类专栏： JS 文章标签：饼形图 js 画布

本文链接：https://blog.csdn.net/weixin_43885459/article/details/84980222

版权

JS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图封装</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

<script src="jrChart.js"></script>
<script>
    var obj = {
        id:"container",
        width:500,
        height:300,
        data:[
            {
                name:"不及格",
                num:4,
                color:"red"
            },
            {
                name:"及格",
                num:13,
                color:"orange"
            },
            {
                name:"良好",
                num:30,
                color:"purple"
            },
            {
                name:"优秀",
                num:2,
                color:"green"
            },
            {
                name:"满分",
                num:1,
                color:"blue"
            }
        ]
    }
    drawPie(obj);
</script>

引入名叫jrChart的js文件

function drawPie(obj) {
    var id = obj.id;
    var data = obj.data;
    var width = obj.width;
    var height = obj.height;
    var length = data.length;
    //获取每个数据所占的百分比
    var sum = 0;
    for(var i = 0;i < length;i++){
        sum = sum + data[i].num
    }
    console.log(sum);

    var container = document.getElementById(id);
    container.style.width = width + "px";
    container.style.height = height + "px";
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    canvas.style.border = "1px solid red";
    var cvs = canvas.getContext("2d");
    container.appendChild(canvas);
    var ox = width / 2;
    var oy = height/2;
    var or;
    if(width > height){
        or = height / 3;
    }else {
        or = width / 3;
    }
    var start = 0;
    var end = 0;
    var rates = [];
    for(var j = 0;j < length;j++){
        rates[j] = data[j].num / sum;
        end = start + Math.PI * 2 * (data[j].num / sum);
        cvs.beginPath();
        cvs.fillStyle = data[j].color;
        cvs.moveTo(ox,oy);
        cvs.arc(ox,oy,or,start,end);
        cvs.closePath();
        cvs.fill();
        start = end;
    }
    console.log(rates);
    var rectY = 0;
    for(var k = 0;k < length;k++){
        rectY = 20 * (k+1);
        cvs.beginPath();
        cvs.fillStyle = data[k].color;
        cvs.rect(20,rectY,25,13);
        cvs.fill();
        cvs.closePath();
    }
    var text = "";
    var textX = 60;
    var textY = 0;
    for(var m = 0;m<length;m++){
       text = data[m].name + (rates[m] * 100) + "%";
       textY = 20 * (m+1) + 12;
       cvs.beginPath();
       cvs.fillStyle = data[m].color;
       cvs.fillText(text,textX,textY,50);
       cvs.fill();
       cvs.closePath();
    }
}

结果如下
在这里插入图片描述

小栗子的普

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js简单插件（饼形图）

html代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;饼图封装&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div
复制链接

扫一扫

专栏目录