angular4+百分比进度显示插件用法示例

angular4+百分比进度显示插件用法示例

一、在npm社区中搜索 :

ng-circle-progress

二、在项目目录下安装下载

npm install ng-circle-progress --save

三、在app.module.ts文件中导入NgCircleProgressModule模块,

并在@NgModule装饰器中使用NgCircleProgressModule.forRoot()的方法,里面的参数

是个对象字面量

NgCircleProgressModule.forRoot({ radius: 100, outerStrokeWidth: 16, innerStrokeWidth: 8, outerStrokeColor: "#78C000", innerStrokeColor: "#C7E596", animationDuration: 300 })

四、在app.component.html中导入标签

<circle-progress [percent]="85" [radius]="100" [outerStrokeWidth]="16" [innerStrokeWidth]="8" [outerStrokeColor]="'#78C000'" [innerStrokeColor]="'#C7E596'" [animation]="true" [animationDuration]="300" ></circle-progress>

其中参数有:

选项 类型 默认 描述
percent   number   0   您想要显示的百分比数  
maxPercent   number   1000   您想要显示的最大百分比数  
radius   number   90   圆的半径  
clockwise   boolean   true   是否顺时针或逆时针旋转  
showTitle   boolean   true   是否显示标题  
showSubtitle   boolean   true   是否显示字幕  
showUnits   boolean   true   是否显示单位  
showBackground   boolean   true   是否显示背景圈  
showInnerStroke   boolean   true   是否显示内部中风  
backgroundStroke   string   'transparent'   背景描边颜色  
backgroundStrokeWidth   number   0   背景圈的笔画宽度  
backgroundPadding   number   5   填充的背景圈子  
backgroundColor   string   'transparent'   背景颜色  
backgroundOpacity   number   1   背景颜色的不透明度  
space   number   4   外圈和内圈之间的空间  
toFixed   number   0   在标题中使用固定的数字符号  
renderOnClick   boolean   true   渲染组件时单击  
units   string   '%'   单位显示在标题旁边  
unitsFontSize   string   '10'   单位的字体大小  
unitsColor   string   '#444444'   单位的字体颜色  
outerStrokeWidth   number   8   外圈的行程宽度(进度圈)  
outerStrokeColor   sting   '#78C000'   外圈的笔触颜色  
outerStrokeLinecap   sting   'round'   外圈的笔画线条。可能的值(屁股,圆形,方形,继承)  
innerStrokeWidth   number   4   内圈的行程宽度  
innerStrokeColor   sting   '#C7E596'   内圈的笔触颜色  
title   string|Array   'auto'   文字显示为标题。当标题等于'自动'时显示百分比。  
titleFormat   Function   undefined   一个回调函数来格式化标题。它返回一个字符串或一个字符串数组。  
titleColor   string   '#444444'   标题的字体颜色  
titleFontSize   string   '20'   标题的字体大小  
subtitle   string|Array   'Percent'   文字显示为副标题  
subtitleFormat   Function   undefined   一个回调函数来格式化字幕。它返回一个字符串或一个字符串数组。  
subtitleColor   string   '#A9A9A9'   字幕的字体颜色  
subtitleFontSize   string   '10'   字幕的字体大小  
animation   boolean   true   渲染时是否为外部圆圈设置动画  
animateTitle   boolean   true   是否在渲染时为标题添加动画  
animateSubtitle   boolean   false   是否在渲染时为字幕添加动画  
animationDuration   number   500   动画持续时间以微秒为单位  
class   string   ''   SVG元素的CSS类名称  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ff748c6a66bb03315abe8686be8f9499.html