HTML5圆形百分比进度条插件


源码介绍

简要教程

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

  • 不需要样式文件,样式完全集成在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 class="circleChart" id="circle1"></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


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

例如: #3459eb, #e6e6e6, blue


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


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


widthRatio:设置圆形进度条的线条宽度比例。使用百分比浮点数。如:0.40.6


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


unit:设置圆形进度条当前进度值的单位。例如:percentdegrad


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


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


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


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


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


lineCap:用于设置圆形进度条的线头样式。可以是: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。


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


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


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


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


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


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


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


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


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


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

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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部