本文實例講述了jQuery圓形統計圖開發的方法。分享給大家供大家參考。具體分析如下：
這裡我們要跟大家介紹一款圓形統計圖circliful，它基於HTML5的畫布和jQuery，無需使用圖像輕鬆實現圓形統計圖，而且有很多屬性設置，使用起來非常方便。效果圖如下：
首先我們需要將jquery庫檔案和jquery.circliful.min.js引入頁面中。
所需的Jquery檔案引入後，現在我們就可以自訂圓形統計圖的基本樣式了：
樣式初步定義好之後，只需要在需要統計圖的地方，加上以下樣式程式碼：
區域塊填入後，我們現在需要初始化它了：
就這麼簡單，只需輕鬆幾部就可以完成帥氣的統計圖了。
以下是插件的基本屬性說明：
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程式設計有所幫助。
