如何理解jQuery圓形統(tǒng)計(jì)圖

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何理解jQuery圓形統(tǒng)計(jì)圖，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

如何使用circliful

將jquery庫(kù)文件和jquery.circliful.min.js引入到頁(yè)面中。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/jquery.circliful.min.js"></script>

添加css樣式：

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

在需要展現(xiàn)統(tǒng)計(jì)圖的位置加入以下html代碼：

<p 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"></p>

然后在頁(yè)面中加入調(diào)用circliful的代碼：

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

然后預(yù)覽頁(yè)面，你會(huì)看到一個(gè)非常簡(jiǎn)潔漂亮的圓形統(tǒng)計(jì)圖。

選項(xiàng)設(shè)置

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

上述就是小編為大家分享的如何理解jQuery圓形統(tǒng)計(jì)圖了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。