【插件】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