圆环百分比

来源：互联网发布：手机淘宝怎么投诉店铺编辑：程序博客网时间：2024/06/11 20:03

这里写图片描述

(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 250data-text   显示在圆圈内侧的文字内容    emptydata-info   显示在data-text下的说明信息  emptydata-width  圆圈的厚度px 15data-fontsize   圈内文字大小px    15data-percent    圆圈统计百分比%，1-100  50data-fgcolor    圆圈的前景色  #556b2fdata-bgcolor    圆圈的背景色  #eeeeeedata-fill   圆形的填充背景色    emptydata-type   圆形统计类型，可以是”half”或”full” fulldata-total  数据总量，和data-part配合使用 emptydata-part   数据量，与data-total配合使用 emptydata-border 圆形样式，可以加边框，如inline或outline  emptydata-icon   Fontawesome图标样式，详情可参照：Fontawesome Website – Icons   emptydata-icon-size  图标大小    emptydata-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>

0 0