jquery-plugin-circliful环形百分比统计图

jquery-plugin-circliful

Circliful 是个 jQuery 插件，用来展示统计的数据。

1. 不需要图片，用圆来显示统计的数据信息
2. 基于 HTML5 canvas 和 jQuery
3. 很多选项可以设置数据属性
4. Font Awesome 集成

1. show Infos as Circle Statistics, no images used
2. based on html5 canvas and jquery
3. many options can be set as data attributes
4. fontawesome integration

如何使用：
将jquery和circliful引入到你的页面中。

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

如果你想使用Font Awesome图标，你也需要将Font Awesome图标对应的样式引入到你的站点中。

为你的站点添加一个具有唯一ID的元素，并且有必须的data属性，例如：

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

在站点最后加入以下代码：

<script>
$( document ).ready(function() {
        $('#myStat').circliful();
    });
</script>

数据（属性）选项

you can set the options easily as data attributes for Example: data-dimension=”250″

• dimension / is the height and width of the element / default is 200px on 200px
• text / will be displayed inside of the circle over the info element
• info / will be displayed inside of the circle bellow the text element (can be empty if you don’t want to show info text)
• width / is the size of circle / default is 15px
• fontsize / is the font size for the text element / default is 15px
• percent / can be 1 to 100
• fgcolor / is the foreground color of the circle / default is #556b2f
• bgcolor / is the background color of the cicle / default is #eee
• fill / is the background color of the whole circle (can be empty if you don’t want to set a background to the whole circle)
• type / full or half circle for example data-type=”half” if not set the circle will be a full circle / default full circle
• total / If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85%
• part
• border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
• icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
• iconsize / Will set the font size of the icon.
• iconcolor / Will set the font color of the icon.
• animationstep / Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1
• startdegree / is the degree to start animate fgcolor / default is 0
• bordersize / set the width of the border

转载请注明：前端收藏 » jquery-plugin-circliful环形百分比统计图