欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery圓形統(tǒng)計(jì)圖開發(fā)實(shí)例

 更新時(shí)間：2015年01月04日 16:16:44   投稿：shichen2014  
這篇文章主要介紹了jQuery圓形統(tǒng)計(jì)圖開發(fā)的方法,實(shí)例分析了circliful插件的用法與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery圓形統(tǒng)計(jì)圖開發(fā)的方法。分享給大家供大家參考。具體分析如下：

這里我們要給大家介紹一款圓形統(tǒng)計(jì)圖circliful，它基于HTML5的畫布和jQuery，無(wú)需使用圖像輕松實(shí)現(xiàn)圓形統(tǒng)計(jì)圖，而且有很多屬性設(shè)置，使用起來(lái)非常方便。效果圖如下：

首先我們需要將jquery庫(kù)文件和jquery.circliful.min.js引入到頁(yè)面中。

復(fù)制代碼 代碼如下:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

所需的Jquery文件引入后，現(xiàn)在我們就可以自定義圓形統(tǒng)計(jì)圖的基本樣式了：

復(fù)制代碼 代碼如下:

<style>
.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>

樣式初步定義好之后，只需要在需要統(tǒng)計(jì)圖的地方，添加如下樣式代碼：

復(fù)制代碼 代碼如下:

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" 
data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" 
data-bgcolor="#eee" data-fill="#ddd"></div>

區(qū)域塊填寫完之后，我們現(xiàn)在需要初始化它了：

復(fù)制代碼 代碼如下:

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

就這么簡(jiǎn)單，只需輕松幾部就可以完成帥氣的統(tǒng)計(jì)圖了。

下面是插件的基本屬性說(shuō)明：

Circliful提供了豐富的屬性選項(xiàng)設(shè)置，基于html5的data屬性，以下是設(shè)置清單。

參數(shù) 描述 默認(rèn)值
data-dimension 圓形圖的寬度和高度px 250
data-text 顯示在圓圈內(nèi)側(cè)的文字內(nèi)容 empty
data-info 顯示在data-text下的說(shuō)明信息 empty
data-width 圓圈的厚度px 15
data-fontsize 圈內(nèi)文字大小px 15
data-percent 圓圈統(tǒng)計(jì)百分比%，1-100 50
data-fgcolor 圓圈的前景色 #556b2f
data-bgcolor 圓圈的背景色 #eeeeee
data-fill 圓形的填充背景色 empty
data-type 圓形統(tǒng)計(jì)類型，可以是”half”或”full” full
data-total 數(shù)據(jù)總量，和data-part配合使用 empty
data-part 數(shù)據(jù)量，與data-total配合使用 empty
data-border 圓形樣式，可以加邊框，如inline或outline empty
data-icon Fontawesome圖標(biāo)樣式，詳情可參照：Fontawesome Website – Icons empty
data-icon-size 圖標(biāo)大小 empty
data-icon-color 圖標(biāo)顏色 empty

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論