前端 环形统计_jQuery教程 jquery.circliful----环形统计图详解
本篇教程介绍了jQuery教程 jquery.circliful----环形统计图详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
<
环形统计图效果：
左边统计图数据绑定右边人员出勤率，当数人员出勤率变化，统计图更新。
引入js，设置css：
/*环形图样式start*/
.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;
}
/*环形图样式end*/
HTML：
一线人员出勤率
0/
0
初始化：
//加载环形图
$(document).ready(function () {
$('#circleStat').circliful();
});
绑定数据：
//环形图百分比
var persent = Math.round(results.total / results.totalUser * 1000) / 10;//百分比
persent = isNaN(persent) ? 0 : persent;//当在线人数为0 时，需要将persent设置为0显示var statId = $('#circleStat').attr('id');//获取统计图元素的id
var statHtml = '
'data-width="10" data-fontsize="30" data-percent="' + persent + '" data-fgcolor="#61a9dc"' +
'data-bgcolor="#eee">
$('.chart-content').html(statHtml);//替换统计图元素
$('#' + statId).circliful();//加载统计图
// $('#circleStat').attr("data-text", persent + "%");
// $('#circleStat').attr("data-percent", persent);
// $('.circle-text').html(persent + "%");
results.total和results.totalUser分别为在线人数和人员总数。
注：原来是直接赋值在元素的data-text和data-percent属性上，用来改变环形统计图中间的数字和图形占比的。可是图形不会自动刷新，所以设置参数后直接替换真个div，然后再加载环形统计图。
插件下载地址：http://www.jq22.com/jquery-info436
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！