這期內容當中小編將會給大家?guī)碛嘘P如何理解jQuery圓形統計圖，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯公司：自2013年起為各行業(yè)開拓出企業(yè)自己的“網站建設”服務，為1000多家公司企業(yè)提供了專業(yè)的網站設計制作、成都網站建設、網頁設計和網站推廣服務， 按需網站設計由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當的提出合理的建議，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據客戶的實際情況給出合理的網站構架，制作客戶同行業(yè)具有領先地位的。

今天我給大家介紹一款圓形統計圖circliful，它基于HTML5的畫布和jQuery，無需使用圖像輕松實現圓形統計圖，而且有很多屬性設置，使用起來非常方便。

如何使用circliful

將jquery庫文件和jquery.circliful.min.js引入到頁面中。

添加css樣式：

在需要展現統計圖的位置加入以下html代碼：

然后在頁面中加入調用circliful的代碼：

然后預覽頁面，你會看到一個非常簡潔漂亮的圓形統計圖。

選項設置

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圓形統計圖了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。

當前名稱：如何理解jQuery圓形統計圖-創(chuàng)新互聯
本文地址：http://weahome.cn/article/ijesd.html