(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>
