插件描述：一个漂亮和容易使用的jQuery插件,来绘制圆形进度条
circleChart使用方法
在页面中引入jquery和circleChart.min.js文件。
1 2 | <script src="path/to/jquery.min.js"></script><script src="path/to/circleChart.min.js"></script> |
HTML结构
使用一个<div>元素作为该圆形百分比进度条的HTML结构：
1 | <div class="circleChart" id="circle1"></div> |
初始化插件
在页面DOM元素加载完毕，可以通过circleChart()方法来初始化该圆形百分比进度条插件。
1 | $("#circle1").circleChart(); |
配置参数
circleChart.js圆形百分比进度条插件的默认配置参数如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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 |
实例
1 2 3 4 5 6 | $(".circleChart").circleChart({ value: 68, startAngle: 180, speed: 3000, animation: "easeInOutCubic" }); |
1 2 3 4 5 | setInterval(function() { $(".circleChart").circleChart({ value: Math.random()*100 });}, 4000); |
PREVIOUS:
NEXT:
相关插件-加载,圆边
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
波克比 0
2018/8/6 11:32:18
-
有没有完整的API文档，圆环中间的数字颜色怎么修改
西瓜0
2018/8/15 15:24:52
-
.circleChart_text{color: #ef0a0a;}
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
