canvas+js画饼状图

最新推荐文章于 2020-05-09 18:27:23 发布

dengluandai1740

最新推荐文章于 2020-05-09 18:27:23 发布

阅读量200

点赞数

文章标签： php python java

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

版权

效果：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>

    (function () {
        var data = [{
            "value":"0.4",
            "color":"red",
            "name":"JAVA"
        },{
            "value":"0.3",
            "color":"green",
            "name":"PYTHON"
        },{
            "value":"0.2",
            "color":"blue",
            "name":"C++"
        },{
            "value":"0.1",
            "color":"grey",
            "name":"PHP"
        }];
       var canvas = document.getElementById("canvas");
       //设置宽高不从css中设置
       canvas.width = 600;//设置canvas宽
       canvas.height = 600;//设置canvas高
       canvas.style.border = "1px solid red";
        //获取上下文
       var ctx = canvas.getContext("2d");
       //画图
        var x0  = 300,y0 = 300;//圆心
        var x,y;//文字放置位置
        var radius = 100;
        var tempAngle = -90;//画圆的起始角度
        for(var i = 0;i<data.length;i++){
            var startAngle = tempAngle*Math.PI/180;//起始弧度
            var angle = data[i].value*360;
            var endAngle = (tempAngle+angle)*Math.PI/180;//结束弧度
            var textAngle = tempAngle + 0.5*angle;//文字放的角度
            x = x0 + Math.cos(textAngle*Math.PI/180)*(radius+20);//文字放的X轴
            y = y0 + Math.sin(textAngle*Math.PI/180)*(radius+20);//文字放的Y轴
            //如果文字在圆形的左侧，那么让文字 对齐方式为 文字结尾对齐当前坐标。
            if( textAngle > 90 && textAngle < 270 ) {
                ctx.textAlign = 'end';
            }
            var text = data[i].name + " "+ data[i].value*100+"%";
            ctx.fillText(text,x,y);
            ctx.beginPath();
            ctx.moveTo(x0,y0);
            ctx.fillStyle = data[i].color;
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            ctx.fill();
            tempAngle += angle;
        }
    }());
</script>
</body>
</html>

转载于:https://www.cnblogs.com/alex-xxc/p/10037110.html

dengluandai1740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫