标签：
circliful介绍
是一款jquery+css的小工具，用来显示"环状"图表的工具。
circliful兼容性
circliful插件是基于HTML5上开发的，所以circliful支持IE10以上，以及各大浏览器。
circliful使用
1.引用js和css样式
可以到下面连接下载我的例子。
http://pan.baidu.com/s/1dFK31ZF
如果失效邮箱留言，我发给你。
2.创建div环图
例子：
<div
id="myStathalf1"
data-dimension="200"
data-width="30"
data-fontsize="38"
data-percent="35"
data-fgcolor="#7ea568"
data-bgcolor="rgba(100%, 94.9%, 0%, 0)"
data-icon="fa-sort-asc"
data-icon-size="28"
style="border:1px solid #FF0000;"
>
</div>
说明：里面的一些详细参数可以参考下面的表格，来设置和改变。
div参数详解：
参数 描述 默认值
--------------------------------------------------------------------------------
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 图标颜色
--------------------------------------------------------------------------------
注意：
在你使用circliful来做半圆图的时候，虽然显示的是一个半环，但是他实际的div大小还是一个整圆的div大小，
我在实际应用的时候，因为页面比较简单，所以用的绝对定位。
3.调用circliful()生成环图
①--------------------------------------------------------------------------------
原始js调用，只需要根据你设置的id来实现circliful()方法即可。
打码：
$(‘#myStathalf1‘).circliful();
②--------------------------------------------------------------------------------
环境模拟：
在你使用的过程中，可能你会遇到，我想实现一个功能，我输入一个角度，然后这个环图就会
转到这个角度。在这个问题的前提下来实现下面的功能。
解决办法：
首先，先声明这个修改是引用别人的东西。（好久了，不好意思没找到连接）
引用我例子中的jquery.circliful.js（这个就是别人修改的内容，感谢大神），否则是不会生效的哦。
在你生成环图的时候，可以在生成时加入一个endPercent属性。
代码：
$(‘#myStathalf2‘).circliful({
endPercent: angle
});
说明：angle为一个字符型变量，可以换成0~100之间的数字，来实现环图显示百分比。
③--------------------------------------------------------------------------------
环境模拟：
当大于一定角度是，环图的显示颜色会变。比如当环图小于50%时是绿色大于50%的是红色
解决办法：
这时我们要修改jquery.circliful.js中的内容了。
代码：
找到jquery.circliful.js中的animate(current){}方法。
参数current，表示你环图显示的占比。例如：半圆图，转动60%，current的值为0.6
只需修改animate(current){}方法中的：
/**
* [修改] 判断值是否超过圆形的一半，并修改圆形颜色 *
**/
if(current < 0.5){
fgcolor = ‘#14b997‘;
}else{
fgcolor = ‘#f75656‘;
}
这个if判断就可以实现这部分功能，当然如果不需要删除即可。
jquery.circliful使用说明，角度修改，变色功能实现
标签：
原文地址：http://www.cnblogs.com/wblhahaha/p/5407550.html
