canvas——饼状图绘制文字

最新推荐文章于 2022-05-25 15:49:40 发布

sleepwalker_1992

最新推荐文章于 2022-05-25 15:49:40 发布

阅读量2.1k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80576280

版权

canvas 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

重点：计算文字应放的位置坐标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图绘制文字</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        您的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';

        var data = [{
            "value": .2,
            "color": "red",
            "title": "大专"
        },{
            "value": .4,
            "color": "blue",
            "title": "本科"
        },{
            "value": .3,
            "color": "green",
            "title": "硕士"
        },{
            "value": .1,
            "color": "orange",
            "title": "博士"
        }];

        //定义起始角度
        var tempAngle=-90;
        //定圆心位置
        var x0=300,y0=300;
        //定半径长度
        var radius=200;
        //从-90度开始绘制
        for(var i=0; i<data.length; i++){
            ctx.beginPath();
            ctx.moveTo(x0,y0);
            //当前扇形角度
            var angle = data[i].value*360;
            //当前扇形起始绘制弧度
            var startAngle = tempAngle*Math.PI/180;
            //当前扇形借结束绘制弧度
            var endAngle = (tempAngle + angle)*Math.PI/180;
            //绘制扇形
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            ctx.stroke();
            //填充扇形
            ctx.fillStyle = data[i].color;
            ctx.fill();

            //绘制文字
            //提取要绘制的文字内容
            var txt = data[i].value*100+'%';
            //计算文字要放的角度
            var txtAngle = tempAngle + 1/2*angle;
            //计算文字要放的坐标位置
            var x,y;
            x=x0+Math.cos(txtAngle*Math.PI/180)*(radius+20);
            y=y0+Math.sin(txtAngle*Math.PI/180)*(radius+20);
            //如果文字在圆形的左侧，那么让文字 对齐方式为 文字结尾对齐当前坐标。
            if(txtAngle>90 && txtAngle<270){
                ctx.textAlign = 'end';
            }
            //文字绘制到扇形旁边
            ctx.fillText(txt,x,y);

            //当前扇形结束绘制角度，即下一个扇形开始绘制角度
            tempAngle += angle;
        }
    })();
</script>
</body>
</html>

效果：

sleepwalker_1992

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
canvas——饼状图绘制文字

重点：计算文字应放的位置坐标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>饼状图绘制文字</title></head><body><div id="container"&gt...
复制链接

扫一扫