圆环百分比

(function(a) {
    a.fn.circliful = function(b, d) {
        var c = a.extend({
            fgcolor: "#556b2f",
            bgcolor: "#eee",
            fill: false,
            width: 15,
            dimension: 200,
            fontsize: 15,
            percent: 50,
            animationstep: 1,
            iconsize: "20px",
            iconcolor: "#999",
            border: "default",
            complete: null
        }, b);
        return this.each(function() {
            var w = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border"];
            var f = {};
            var F = "";
            var n = 0;
            var t = a(this);
            var A = false;
            var v, G;
            t.addClass("circliful");
            e(t);
            if (t.data("text") != undefined) {
                v = t.data("text");
                if (t.data("icon") != undefined) {
                    F = a("<i></i>").addClass("fa " + a(this).data("icon")).css({
                        color: f.iconcolor,
                        "font-size": f.iconsize
                    })
                }
                if (t.data("type") != undefined) {
                    j = a(this).data("type");
                    if (j == "half") {
                        s(t, "circle-text-half", (f.dimension / 1.45))
                    } else {
                        s(t, "circle-text", f.dimension)
                    }
                } else {
                    s(t, "circle-text", f.dimension)
                }
            }
            if (a(this).data("total") != undefined && a(this).data("part") != undefined) {
                var I = a(this).data("total") / 100;
                percent = ((a(this).data("part") / I) / 100).toFixed(3);
                n = (a(this).data("part") / I).toFixed(3)
            } else {
                if (a(this).data("percent") != undefined) {
                    percent = a(this).data("percent") / 100;
                    n = a(this).data("percent")
                } else {
                    percent = c.percent / 100
                }
            }
            if (a(this).data("info") != undefined) {
                G = a(this).data("info");
                if (a(this).data("type") != undefined) {
                    j = a(this).data("type");
                    if (j == "half") {
                        D(t, 0.9)
                    } else {
                        D(t, 1.25)
                    }
                } else {
                    D(t, 1.25)
                }
            }
            a(this).width(f.dimension + "px");
            var i = a("<canvas></canvas>").attr({
                width: f.dimension,
                height: f.dimension
            }).appendTo(a(this)).get(0);
            var g = i.getContext("2d");
            var r = i.width / 2;
            var q = i.height / 2;
            var C = f.percent * 360;
            var H = C * (Math.PI / 180);
            var l = i.width / 2.5;
            var B = 2.3 * Math.PI;
            var z = 0;
            var E = false;
            var o = f.animationstep === 0 ? n : 0;
            var p = Math.max(f.animationstep, 0);
            var u = Math.PI * 2;
            var h = Math.PI / 2;
            var j = "";
            var k = true;
            if (a(this).data("type") != undefined) {
                j = a(this).data("type");
                if (j == "half") {
                    B = 2 * Math.PI;
                    z = 3.13;
                    u = Math.PI * 1;
                    h = Math.PI / 0.996
                }
            }

            function s(J, x, y) {
                a("<span></span>").appendTo(J).addClass(x).text(v).prepend(F).css({
                    "line-height": y + "px",
                    "font-size": f.fontsize + "px"
                })
            }

            function D(y, x) {
                a("<span></span>").appendTo(y).addClass("circle-info-half").css("line-height", (f.dimension * x) + "px")
            }

            function e(x) {
                a.each(w, function(y, J) {
                    if (x.data(J) != undefined) {
                        f[J] = x.data(J)
                    } else {
                        f[J] = a(c).attr(J)
                    }
                    if (J == "fill" && x.data("fill") != undefined) {
                        A = true
                    }
                })
            }

            function m(x) {
                g.clearRect(0, 0, i.width, i.height);
                g.beginPath();
                g.arc(r, q, l, z, B, false);
                g.lineWidth = f.width + 1;
                g.strokeStyle = f.bgcolor;
                g.stroke();
                if (A) {
                    g.fillStyle = f.fill;
                    g.fill()
                }
                g.beginPath();
                g.arc(r, q, l, -(h), ((u) * x) - h, false);
                if (f.border == "outline") {
                    g.lineWidth = f.width + 13
                } else {
                    if (f.border == "inline") {
                        g.lineWidth = f.width - 13
                    }
                }
                g.strokeStyle = f.fgcolor;
                g.stroke();
                if (o < n) {
                    o += p;
                    requestAnimationFrame(function() {
                        m(Math.min(o, n) / 100)
                    }, t)
                }
                if (o == n && k && typeof(b) != "undefined") {
                    if (a.isFunction(b.complete)) {
                        b.complete();
                        k = false
                    }
                }
            }
            m(o / 100)
        })
    }
}(jQuery));

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8">
        <title>演示：jQuery圆形统计图（百分比）</title>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.circliful.min.js"></script>
        <style>
            .demo {
                width: 600px;
                min-height: 500px;
                float: left;
                border: 1px solid red;
            }

            .demo div {
                float: left;
                width: 300px;
                margin: 20px;
                color: red;
            }

            .demo p {
                line-height: 42px;
                font-size: 16px
            }

            .circliful {
                position: relative;
            }

            .circle-text,
            .circle-info,
            .circle-text-half,
            .circle-info-half {
                width: 100%;
                position: absolute;
                text-align: center;
                display: inline-block;
            }

            .circle-info,
            .circle-info-half {
                color: #999;
            }

            .circliful .fa {
                margin: -10px 3px 0 3px;
                position: relative;
                bottom: 4px;
            }
        </style>

        <script>
            $(function() {
                $('#myStat').circliful();
                $('#myStat2').circliful();
                $('#myStat3').circliful();
                $('#myStat4').circliful();
                setInterval(function(){

                },50);
            });
        </script>
    </head>

    <body>
        <textarea style="width: 680px;height: 260px;resize: none;float: left;">
data-dimension  圆形图的宽度和高度px 250
data-text   显示在圆圈内侧的文字内容    empty
data-info   显示在data-text下的说明信息  empty
data-width  圆圈的厚度px 15
data-fontsize   圈内文字大小px    15
data-percent    圆圈统计百分比%，1-100  50
data-fgcolor    圆圈的前景色  #556b2f
data-bgcolor    圆圈的背景色  #eeeeee
data-fill   圆形的填充背景色    empty
data-type   圆形统计类型，可以是”half”或”full” full
data-total  数据总量，和data-part配合使用 empty
data-part   数据量，与data-total配合使用 empty
data-border 圆形样式，可以加边框，如inline或outline  empty
data-icon   Fontawesome图标样式，详情可参照：Fontawesome Website – Icons   empty
data-icon-size  图标大小    empty
data-icon-color 图标颜色
        </textarea>
        <div id="main">

            <div class="demo">
                <div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="100" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
                <div id="myStat2" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>
                <div id="myStat3" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-icon="fa-task"></div>
                <div id="myStat4" data-dimension="250" data-text="65%" data-info="New Clients" data-width="10" data-fontsize="38" data-percent="65" data-fgcolor="black" data-bgcolor="red"></div>

            </div>

        </div>

    </body>

</html>