(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>时间： 2023-09-28 21:40:37