zoukankan html css js c++ java

canvas绘制饼状图

效果图：

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06绘制饼状图</title>
</head>
<body>
 <canvas id="canvas">
    抱歉，您的浏览器不支持Canvas。请升级您的浏览器！
 </canvas>

 <script>
    (function(){
        var canvas = document.getElementById("canvas");
        canvas.border = "1px solid #000";
        canvas.width = 600;
        canvas.height = 600;
        var ctx = canvas.getContext("2d");

        var data = [{
                "value": .2,
                "color": "red",
                "title": "社保"
            },{
                "value": .3,
                "color": "blue",
                "title": "绩效工资"
            },{
                "value": .4,
                "color": "green",
                "title": "基本工资"
            },{
                "value": .1,
                "color": "#ccc",
                "title": "奖惩"
            }];

        var x0 = 300;
        var y0 = 300;
        var radius = 100;
        var tempAngle = -90;
        for(var i=0;i<data.length;i++){
            // 开始绘制新状态的扇形
            ctx.beginPath();
            ctx.moveTo(300, 300);
            ctx.fillStyle = data[i].color;
            var angle = data[i].value*360;
            var startAngle = tempAngle*Math.PI/180; 
            var endAngle = (tempAngle + angle)*Math.PI/180;
            ctx.arc(300, 300, 100, startAngle, endAngle);
            ctx.fill();

            tempAngle+=angle;
        }
    }());
 </script>
</body>
</html>

查看全文

相关阅读:
异常总结
 反射
 面试题
 继承多态接口
 JAVA面向对象变成学习！
学生管理系统---三层架构
 Secondary NameNode
Hadoop之HDFS
大数据相关概念二
 大数据相关概念

原文地址：https://www.cnblogs.com/greedymonkey/p/6920193.html