jQuery圓形統計圖開發實例_jquery

本文實例講述了jQuery圓形統計圖開發的方法。分享給大家供大家參考。具體分析如下：

這裡我們要跟大家介紹一款圓形統計圖circliful，它基於HTML5的畫布和jQuery，無需使用圖像輕鬆實現圓形統計圖，而且有很多屬性設置，使用起來非常方便。效果圖如下：

首先我們需要將jquery庫檔案和jquery.circliful.min.js引入頁面中。

複製程式碼 程式碼如下:

所需的Jquery檔案引入後，現在我們就可以自訂圓形統計圖的基本樣式了：

複製程式碼 程式碼如下:

樣式初步定義好之後，只需要在需要統計圖的地方，加上以下樣式程式碼：

複製程式碼 程式碼如下:

data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" 
data-bgcolor="#eee" data-fill="#ddd">

區域塊填入後，我們現在需要初始化它了：

複製程式碼 程式碼如下:

<script> <br /> $( document ).ready(function() { <br />         $('#myStat').circliful(); <br />     }); <br /> </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程式設計有所幫助。