canvas画饼图

最新推荐文章于 2022-12-09 21:45:12 发布

偷走你的笑

最新推荐文章于 2022-12-09 21:45:12 发布

阅读量124

点赞数

分类专栏：深蓝的大学

原文链接：https://www.cnblogs.com/alex-xxc/p/10037110.html

版权

深蓝的大学专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
    <div>
        <canvas id="canvas"></canvas>
    </div>
</body>
<script>
    var data = [{
        data: 40,
        color: 'red',
        label: '2016'
    },{
        data: 30,
        color: 'grey',
        label: '2017'
    },{
        data: 20,
        color: 'black',
        label: '2018'
    },{
        data: 10,
        color: 'blue',
        label: '2020'
    }]
    function calculate(data){
        if(data instanceof Array){
            var sum = data.reduce(function(a,b){
                return a+b.data
            },0)
            var map = data.map(function(a){
                return {
                    label: a.label,
                    data: a.data,
                    color: a.color,
                    protion: a.data/sum
                }
            })
            return map;
        }
    }
    var canvas = document.getElementById('canvas')
    canvas.width = 600;
    canvas.height = 600;
    canvas.style.border = '1px solid red';
    if(canvas.getContext){
        var ctx = canvas.getContext('2d')
    }
    var x0 = 300,y0 = 300;
    var x,y;
    var radius = 100;
    var tempAngle = -90;

    var data2 = calculate(data)
    for(let i=0;i<data2.length;i++){
        var startAngle = tempAngle*Math.PI/180;
        var angle = data2[i].protion*360
        var endAngle = (tempAngle+angle)*Math.PI/180;
        var textAngle = tempAngle + 0.5*angle;
        console.log(textAngle,'a')
        x = x0 + Math.cos(textAngle*Math.PI/180)*(radius+20)
        y = y0 + Math.sin(textAngle*Math.PI/180)*(radius+20)
        if(textAngle>90&&textAngle<270){
            ctx.textAlign = 'end'
        }else{
            // ctx.textAlign = 'center'
        }
        var text = data2[i].label + ' ' + data2[i].protion*100 + '%'
        ctx.fillText(text,x,y)
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.fillStyle = data2[i].color
        ctx.arc(x0,y0,radius,startAngle,endAngle);
        ctx.fill();
        tempAngle += angle;
    }
</script>
</html>

结果如图所示：
代码结果

偷走你的笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画饼图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫