本文将为关注织梦者的朋友提供的是的【插件】jquery.circliful相关教程，具体实例代码请看下文:

环形统计图效果：

左边统计图数据绑定右边人员出勤率，当数人员出勤率变化，统计图更新。

引入js，设置css： <script src="scripts/jquery/jquery.circliful.min.js"></script> /*环形图样式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： <div> <!--饼状图 start--> <div> <div data-dimension="130" data-text="0%" data-info="" data-width="10" data-fontsize="30" data-percent="0" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div> </div> <!--饼状图 end--> <!--一线人员出勤率 start--> <div> <h4>一线人员出勤率</h4> <p><span>0</span>/ <span>0</span></p> </div> <!--一线人员出勤率 end--> </div> 初始化： //加载环形图 $(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 = '<div data-dimension="130" data-text="' + persent + '%' + '" data-info=""' + 'data-width="10" data-fontsize="30" data-percent="' + persent + '" data-fgcolor="#61a9dc"' + 'data-bgcolor="#eee"></div>';//新建统计图元素 $('.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，然后再加载环形统计图。

通过本文的学习希望对您了解和学习jQuery编程的相关知识有一些好的帮助.感谢关注织梦者.我们将为您收集更多更好的jQuery教程.

这些内容可能对你也有帮助

更多可查看Javascript教程列表页。