circleDonutChart是一款非常实用的基于SVG的扁平风格圆形进度条javascript插件。该圆形进度条插件使用简单，它使用SVG图形来制作进度条，可以制作平滑的动画效果。
使用方法
使用该圆形进度条需要引入circleDonutChart.js文件。
<script type="text/javascript" src="circleDonutChart.js"></script>
HTML结构
你可以使用一个空的<div>元素来制作圆形进度条。
<div id="example1"></div>
初始化插件
要制作圆形进度条，可以使用下面的方法来实例化一个circleDonutChart对象。
var circle = new circleDonutChart('myChartTitle');
“myChartTitle”是div容器的ID号，在这个容器中将生成SVG图形。
方法
该插件为进度条提供了下面的一些方法：
| 方法 | 描述 |
| draw | 基于给定的参数进行绘制 |
| draw (after first draw) | 基于给定的参数进行绘制，省略颜色参数 |
| setValue | 设置值，不会使进度条动画 |
| getValue | 返回实际值 |
| delete | 删除圆形进度条对象 |
| reload | 重新加载进度条对象并用默认参数初始化它 |
配置参数
下面的绘制参数可以传入到draw方法中。
circle.draw({
end:90,
start:0,
maxValue:100,
titlePosition:"outer-top",
titleText:"Consumption",
outerCircleColor:'#0085c8',
innerCircleColor:'#909081'
});
| 参数 | 描述 |
| start | 开始值，如果进度条已有该状态会被忽略 |
| end | 结束值（强制） |
| outerCircleColor | 外圆的颜色 |
| innerCircleColor | 内圆的颜色 |
| textColor | 文本的颜色 |
| animationSpeed = 0 | 不会产生动画效果 |
| animationSpeed = 1 | 正常的动画速度 |
| scaling | 缩放值，1表示正常 |
| size | 进度条的大小，单位像素 |
| getValue() | 获取进度条的值 |
| setValue() | 设置进度条的值 |
| unitText | 设置显示的数字的单位 |
| maxValue | 设置非100%的最大值 |
| titleText | 进度条的标题（在inner-bottom 和 inner-top中应少于12个字符） |
| titlePosition | 标题的显示位置： ["outer-bottom" | "outer-top" | "inner-bottom" | "inner-top"] |
| titleColor | 标题的颜色 |
