圓形統計外掛circliful
阿新 • • 發佈：2018-12-04
效果如下：
1、引入css/js
<link href="css/jquery.circliful.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.circliful.js"></script>2、html
<div id="chart1" data-dimension="80" data-text="" data-info="" data-width="5" data-fontsize="14" data-percent="" data-fgcolor="#000099" data-bgcolor="#eee" style="margin: 0 auto;"></div>
3、js
$('#chart1').data('percent', 59).circliful();4、外掛相關屬性
| 引數 | 描述 | 預設值 |
| 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 | 圖示顏色 |