angular4+百分比进度显示插件用法示例
更新时间：2019年05月05日 11:11:45 作者：ngsave
这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了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类名称 |
// 字幕格式回调示例
formatSubtitle = (percent: number) : string => {
if(percent >= 100){
return "Congratulations!"
}else if(percent >= 50){
return "Half"
}else if(percent > 0){
return "Just began"
}else {
return "Not started"
}
}
或者写成以下形式
formatSubtitle (percent: number) : string {
if(percent >= 100){
return "Congratulations!"
}else if(percent >= 50){
return "Half"
}else if(percent > 0){
return "Just began"
}else {
return "Not started"
}
}
然后再在html页面以插值表达式{{ formatSubtitle(number类型的任意值) }}的方式调用。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要介绍了AngularJS入门教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了浅析webapp框架AngularUI的demo以及对demo的简单修改，需要的朋友可以参考下2014-12-12
angularJs中ng-model-options设置数据同步的方法
今天小编就为大家分享一篇angularJs中ng-model-options设置数据同步的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家详细解析了关于Angular中响应式表单的三种更新值方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
深究AngularJS中ng-drag、ng-drop的用法
本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本篇文章主要介绍了angular4实现tab栏切换的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下2016-08-08
这篇文章主要为大家详细介绍了AngularJS过滤器的使用方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了AngularJS模块学习之Anchor Scroll 的相关资料,需要的朋友可以参考下2016-01-01
本文主要介绍AngularJS简单应用程序,这里提供了详细的流程和代码程序，有需要的小伙伴可以参考下2016-08-08
最新评论