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

本文实例讲述了angular4百分比进度显示插件用法。分享给大家供大家参考，具体如下：

效果展示：

一、在新公共管理社区中搜索：

ng-循环-进度

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

新公共管理安装ng-循环-进度-保存三、在app.module.ts文件中导入NgCircleProgressModule模块，

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

是个对象字面量

ngcircleprogressmodule。对于根({半径： 100，外部存储宽度： 16,内部存储宽度： 8,外部存储颜色： '#78C000 '，内部存储颜色： '#C7E596 '，动画持续时间： 300 })四、在app.component.html中导入标签

圆形-进度[百分比]=' 85 '[半径]=' 100 '[外部笔画宽度]=' 16 '[内部笔画宽度]=' 8 '[外部描边颜色]=' ' # 78c 000 ' '[内部描边颜色]=' ' # c7e 596 ' '[动画]=' true '[animationDuration]=' 300 '/圆形-进度其中参数有：

选项类型默认描述百分比数字0百分比数字您想要显示的最大百分比数字1000最大百分比数字您想要显示的半径数字90圆的半径顺时针布尔真旋转显示标题布尔顺时针或逆时针真显示字幕布尔真显示字幕显示单位布尔真显示单位显示背景布尔真显示内部笔画ba背景笔画字符串“透明”背景笔画颜色背景笔画宽度数字0背景填充数字5填充背景圆背景颜色字符串“透明”背景颜色背景不透明度数字1背景颜色空间的不透明度数字4外环和内环之间的空间固定数字0渲染带有固定数字符号renderOnClick的组件时单击单位字符串在标题中单击布尔值true”单位显示在标题旁边。 unitsFontSize string '10 '个单位字号unitsColor string '#444444 '个单位字体颜色outerStrokeWidth number 8外圈笔画宽度(进度圈)outerStrokeColor sting ' # 78C000 '外圈笔画颜色outerStrokeLinecap sting ' round '外圈笔画线条。可能的值(对接、圆形、方形、继承)innerStrokeWidth数字4内圆笔画宽度innerStrokeColor sting '#C7E596 '内圆笔画颜色标题字符串|Array 'auto '文本显示为标题。当标题等于“自动”时显示百分比。标题格式函数未定义一个回调函数来格式化标题。它返回一个字符串或字符串数组。TitleColor字符串' #444444' titleFontSize字符串' 20' Title Fontsize字幕字符串|数组'百分比'文本显示为字幕格式函数未定义使用回调函数来格式化字幕。它返回一个字符串或字符串数组。subtitleColor字符串“# A9A9”字幕字体颜色subtitleFontSize字符串“10”字幕字体大小动画boolean true是否在渲染过程中为外圆设置动画animateTitle boolean true是否在渲染过程中为标题添加animate btitle bool Ean false是否在渲染动画时为字幕添加动画duration number 500 animate duration以微秒为单位class string“”SVG元素的CSS类名//字幕格式回调示例Format subtitle=(percent 3360 number): string={ if(percent=100){ return '恭喜！'} else if(百分比=50) {return' half'} else if(百分比0) {return '刚开始' } else {return '未开始' }}或以下形式

formatSubtitle(百分比：数字):字符串{ if(百分比=100){返回'恭喜！'} else if(percent=50){ return ' half ' } else if(percent 0){ return '刚开始' } else {return '未开始' }}然后在html页面上以插值表达式的形式调用{{format subtitle(任意数值类型)}}。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。