【插件】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 class="row">
            <!--饼状图 start-->
            <div class="col-md-6 chart-content" style="height:130px;width:130px;">
                <div id="circleStat" 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 class="col-md-6 chart-title pull-right">
                <h4>一线人员出勤率</h4>
                <p><span id="onlines" class="text-primary" style="font-size: 30px;">0</span>/
                    <span id="totalUser" class="allnumber">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 id="' + statId + '" 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，然后再加载环形统计图。

插件下载地址：http://www.jq22.com/jquery-info436