使用canvas绘制饼状图

最新推荐文章于 2024-01-19 16:51:23 发布

weixin_34132768

最新推荐文章于 2024-01-19 16:51:23 发布

阅读量163

点赞数

本文介绍了一种利用HTML5 Canvas元素实现动态饼图的方法。通过JavaScript编程，文章详细展示了如何根据给定的数据集绘制不同颜色的扇形区域，并在每个区域内显示对应的数据比例。此外，还介绍了如何适配不同浏览器的支持情况。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas=document.querySelector('#cavsElem');
        var ctx=canvas.getContext('2d');
        canvas.width=600;
        canvas.height=600;
        canvas.strokeStyle='1px solid #000';
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        },{
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        },{
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        },{
            "value": .1,
            "color": "#ccc",
            "title": "公开课"
        }];
       var tempAngle=-90;
        for(var i=0;i<data.length;i++){
            x0=400;
            y0=400;
//            设置饼图的半径
            radius=200;
//            每次循环开始一个新路径
            ctx.beginPath();
//            将画笔移动到起始位置
            ctx.moveTo(x0,y0);
//            每个扇形的角度
            var angle=data[i].value*360;
            ctx.fillStyle=data[i].color;
//            将角度转化为弧度不，弧度rad=angle*Math.PI/180;
            var startAngle=tempAngle*Math.PI/180;
            var endAngle=(tempAngle+angle)*Math.PI/180;
//            绘制
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            var x,y;
//            绘制文字的内容
            var txt=data[i].value*100+'%';
//            文字的位置在每个扇形的中间
            var txtAngle=tempAngle+1/2*angle;
            x=x0+Math.cos(txtAngle*Math.PI/180)*(radius+20);
            y=y0+Math.sin(txtAngle*Math.PI/180)*(radius+20);
//            设置文字的对齐方式ctx.textAlign:end是文字的尾部与线对齐
            if(txtAngle>90&&txtAngle<270){
                ctx.textAlign='end';
            }
            ctx.fillText(txt,x,y);
            ctx.fill();
            tempAngle+=angle;
        }
    }())
</script>
</body>
</html>