Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to understand the jQuery circular statistical chart. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Today I would like to introduce a circular statistical chart circliful, which is based on HTML5 canvas and jQuery, does not need to use images to easily achieve circular statistical chart, and has a lot of property settings, it is very convenient to use.

How to use circliful

Bring the jquery library file and jquery.circliful.min.js into the page.

Add css styles:

.circliful {position: relative;} .circle-text, .circle-info, .circle-text-half, .circle-info-half {width: 100%; position: absolute; text-align: center; display: inline-block;} .circle-info, .circle-info-half {color: # 999;} .circliful .fa {margin:-10px 3px 0 3px; position: relative; bottom: 4px;}

Add the following html code to the location where you want to show the statistical chart:

Then add the code that calls circliful to the page:

$(document) .ready (function () {$('# myStat'). Circliful ();})

Then preview the page and you will see a very simple and beautiful circular chart.

Option settin

Circliful provides a wealth of property option settings, based on the data property of html5. The following is a list of settings.

Parameter description default data-dimension width and height of circle chart px 250 data-text text displayed on the inside of circle empty data-info display under data-text description information of empty data-width circle thickness px 15 data-fontsize circle text size px 15 data-percent circle statistics% 1-100 50 data-fgcolor circle foreground color # 556b2f data-bgcolor circle background color # eeeeee data-fill circle fill background color empty data-type circle statistics type, can be "half" or "full" full data-total data total, use empty data-part data quantity with data-part, use empty data-border circle style with data-total, can add border, such as inline or outline empty data-icon Fontawesome icon style For more information, please see: Fontawesome Website-Icons empty data-icon-size icon size empty data-icon-color icon color empty

The above is the editor for you to share how to understand the jQuery circular statistical chart, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.