参数名称 | 参数类型 | 默认值 | 描述 |
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 | number | 0 | 圆形指示器的最小值。 |
maxValue | number | 100 |
举例:
css
.syRightBox{ padding-right:1rem;}
.syRightBox canvas{}
#indicatorContainer{ width:5rem; height:5rem; margin-right:2rem;}
页面
<div class="syRightBox" id="indicatorContainer"></div>
<script type="text/javascript">
jquery
$("#indicatorContainer").radialIndicator({
barColor: '#d01111',barWidth: 8,
initValue: 50,
percentage: true
})
</script>