circleChart.js是一款HTML5圆形百分比进度条插件。circleChart.js是一个jquery插件，它可以将指定的元素转换为html5 canvas，生成圆形百分比进度条，并可以只有的控制圆形进度条的颜色、尺寸、文字和动画等。circleChart.js插件的特点还有：

使用方法

在页面中引入jquery和circleChart.min.js文件。

<script src="path/to/jquery.min.js"></script> <script src="path/to/circleChart.min.js"></script> HTML结构

使用一个<div>元素作为该圆形百分比进度条的HTML结构：

<div></div> 初始化插件

在页面DOM元素加载完毕，可以通过circleChart()方法来初始化该圆形百分比进度条插件。

$("#circle1").circleChart(); 配置参数

circleChart.js圆形百分比进度条插件的默认配置参数如下：

color: "#3459eb", backgroundColor: "#e6e6e6", background: true, speed: 2000, widthRatio: 0.2, value: 66, unit: 'percent', counterclockwise: false, size: 110, startAngle: 0, animate: true, backgroundFix: true, lineCap: "round", animation: "easeInOutCubic", text: false, redraw: false, cAngle: 0, textCenter: true, textSize: false, textWeight: 'normal', textFamily: 'sans-serif', relativeTextSize: 1 / 7, autoCss: true, onDraw: false

color：定义圆形进度条进度线的默认前景颜色。可以是十六进制颜色，或颜色关键字。具体可参考：MDN color属性。

例如： #3459eb, #e6e6e6, blue

red">

#67ee3e">

#3459eb">

backgroundColor：定义圆形进度条进度线的默认背景颜色。可以是十六进制颜色，或颜色关键字。具体可参考：MDN color属性。

例如： #3459eb, #e6e6e6, blue

red">

#67ee3e">

background：是否显示圆形进度条的运动轨迹。

true">

false">

speed：设置圆形进度条的动画速度，使用整数值，单位为毫秒。

1000">

5000">

10000">

widthRatio：设置圆形进度条的线条宽度比例。使用百分比浮点数。如：0.4，0.6。

0.6">

0.4">

0.2">

value：设置圆形进度条的当前进度值。单位为unit参数设置的值。

68">

42">

83.1240">

unit：设置圆形进度条当前进度值的单位。例如：percent、deg、rad。

counterclockwise：设置圆形进度条是顺时针旋转，还是逆时针旋转。true表示逆时针旋转，false表示顺时针旋转。

true">

false">

size：设置圆形进度条的尺寸。使用浮点数，单位像素。

110">

200">

300">

startAngle：设置圆形进度条动画的开始角度。

50">

75">

43.1240">

animate：设置圆形进度条动画是否执行平滑动画效果。

true">

false">

backgroundFix：这个参数处于性能考虑，用于设置圆形进度条的背景线条是否比前景线条更细。

true">

false">

lineCap：用于设置圆形进度条的线头样式。可以是：butt, round, square。

butt">

round">

square">

animation：用于设置圆形进度条的easing动画效果。可用效果有：linearTween, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc。

linearTween">

easeInOutQuart">

easeInOutSine">

text：用于设置在圆形进度条下方显示的文字。

textCenter：设置是在圆形进度条下方显示文字，还是在圆形进度条里面显示文字。

true">

false">

onDraw：圆形进度条每一个动画帧之后的回调函数。只会调用一次。

redraw：定义圆形进度条是否重新开始整个动画，或是从最后的值开始动画。布尔值。

cAngle：定义圆形进度条的当前角度。浮点数值。

textSize：定义圆形进度条的文字大小。使用绝对尺寸值。如：10px, 20px, 2em。

10px" data-text-size="10px">

10px" data-text-size="20px">

2em" data-text-size="2em">

relativeTextSize：定义圆形进度条的文字大小。使用相对尺寸值。如：0.1, 0.3, 0.4。

0.1" data-relative-text-size="0.1">

0.3" data-relative-text-size="0.3">

0.4" data-relative-text-size="0.4">

autoCss：定义是否为圆形进度条应用默认的CSS样式。如果要自定义样式，可以将该参数设置为false。

textWeight：设置文字的粗细程度。如：bold, normal等。

textFamily：设置文字的字体。如：sans-serif, monospace等。

circleChart.js圆形百分比进度条插件的github地址为：https://github.com/TheBolliwood/circleChart