溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何理解jQuery圓形統計圖，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
今天我給大家介紹一款圓形統計圖circliful，它基于HTML5的畫布和jQuery，無需使用圖像輕松實現圓形統計圖，而且有很多屬性設置，使用起來非常方便。
將jquery庫文件和jquery.circliful.min.js引入到頁面中。
<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>
在需要展現統計圖的位置加入以下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>
然后在頁面中加入調用circliful的代碼：
<script>
$( document ).ready(function() {
$('#myStat').circliful();
});
</script>
然后預覽頁面，你會看到一個非常簡潔漂亮的圓形統計圖。
Circliful提供了豐富的屬性選項設置，基于html5的data屬性，以下是設置清單。
參數 描述 默認值 data-dimension 圓形圖的寬度和高度px 250 data-text 顯示在圓圈內側的文字內容 empty data-info 顯示在data-text下的說明信息 empty data-width 圓圈的厚度px 15 data-fontsize 圈內文字大小px 15 data-percent 圓圈統計百分比%，1-100 50 data-fgcolor 圓圈的前景色 #556b2f data-bgcolor 圓圈的背景色 #eeeeee data-fill 圓形的填充背景色 empty data-type 圓形統計類型，可以是"half"或"full" full data-total 數據總量，和data-part配合使用 empty data-part 數據量，與data-total配合使用 empty data-border 圓形樣式，可以加邊框，如inline或outline empty data-icon Fontawesome圖標樣式，詳情可參照：Fontawesome Website - Icons empty data-icon-size 圖標大小 empty data-icon-color 圖標顏色 empty
上述就是小編為大家分享的如何理解jQuery圓形統計圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
