jQuery 圓形統計外掛circliful
阿新 • • 發佈：2018-11-22
circliful介紹
是一款jquery+css的小工具，用來顯示"環狀"圖表的工具。
circliful相容性
circliful外掛是基於HTML5上開發的，所以circliful支援IE10以上，以及各大瀏覽器。
circliful下載
連結：https://pan.baidu.com/s/183be9ztUqECeziYXr7tWmA
提取碼：9nsu
circliful使用
1.引用css和js樣式
<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.circliful.js"></script>
2.建立div環圖
<div name='name' class="circliful" id="myStat" data-dimension="220" data-text='98%' data-info='準點率'
data-percent="98" data-width="12" data-fgcolor="#02FF9A" data-bgcolor="#3C4247">
</div>/* 自定義 circliful 樣式 */ .circliful .circle-text { font-size: 32px !important; line-height: 148px !important; } .circliful .circle-info { font-size: 24px !important; line-height: 220px !important; color: #FFFFFF; }
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 | 圖示顏色 |
3.呼叫circliful()生成環圖
<script>
$(document).ready(function() {
$('#myStat').circliful();
});
</script>