radialIndicator是一款轻量级的jQuery圆形指示器插件。该圆形指示器插件支持颜色范围,动态修改值,格式化和百分比值等形式。它可以很好的和jQuery或angular js一起工作。
在页面中添加添加jQuery(可选)和radialIndicator.js文件:
< script type = "text/javascript" src = "js/jquery.min.js" ></ script > < script src = "js/radialindicator.js" ></ script > |
圆形指示器的HTML结构使用一个<div>即可。
< div id = "indicatorContainer" ></ div > |
现在,可以用下面的方法调用最基本的圆形指示器:
$( '#indicatorContainer' ).radialIndicator(); |
$( '#indicatorContainer5' ).radialIndicator({ showPercentage : false // option }); //or using native javascript var progObj = radialIndicator( '#indicatorContainer5' , { showPercentage : false // option }); |
radialIndicator.defaults.radius = 80; radialIndicator.defaults.barColor = "#99CC33" ; |
设置为true
在圆形指示器中插入给定范围的颜色。
圆形指示器的最大值。
参数名称 | 参数类型 | 默认值 | 描述 |
radius | number | 50 | 定义圆形指示器的内部的圆的半径。 |
barWidth | number | 5 | 定义圆形指示器的刻度条的宽度。 |
barBgColor | colour code in hex | #eeeeee | 定义圆形指示器的刻度条的背景颜色。 |
barColor | object of colour range like ({0 : '#FF0000', 50 : '#FFFF00', 100 : '#0066FF',}) or color code in hex | #99CC33 |
定义渊声巷指示器的刻度条颜色。如果提供一个颜色范围对象作为值,插件会将该范围的颜色插入(如果 interpolate 选项为true )在指定的位置。 |
roundCorner | boolean | false |
如果设置为true 则圆形指示器的刻度bar有圆角。 |
format | # format like (##,###,###) or a formatter function | ## | Define # format or formatter function to format indicator number. |
frameNum | number | 100 for percentage and 500 for others | Number of frames in which indcator circle is divided. |
frameTime | number | 10 | Time taken to go from one frame to another. |
fontColor | hex color code | color code of progress | By default it takes the color code of progress at specific point. If defined it will take the defined color code. |
fontSize | number | Calculated | 默认情况下字体大小是适合于圆形指示器的内圆。定义这个参数可以覆盖它。 |
fontFamily | font family similiar to per css syntax | default | 定义圆形指示器的数值的字体。 |
fontWeight | font weight similiar to css syntax | bold | 定义圆形指示器的数值的字体weight。 |
interpolate | boolean | true | |
percentage | boolean | true |
设置为true 显示圆形指示器的百分比数值。 |
displayNumber | boolean | true |
设置为true 显示圆形指示器的刻度数值。 |
initValue | number | minValue or 0 | 圆形指示器初始化的值。 |
minValue |
热门源码