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中导入标签



其中参数有:

选项类型默认描述
percentnumber0您想要显示的百分比数
maxPercentnumber1000您想要显示的最大百分比数
radiusnumber90圆的半径
clockwisebooleantrue是否顺时针或逆时针旋转
showTitlebooleantrue是否显示标题
showSubtitlebooleantrue是否显示字幕
showUnitsbooleantrue是否显示单位
showBackgroundbooleantrue是否显示背景圈
showInnerStrokebooleantrue是否显示内部中风
backgroundStrokestring'transparent'背景描边颜色
backgroundStrokeWidthnumber0背景圈的笔画宽度
backgroundPaddingnumber5填充的背景圈子
backgroundColorstring'transparent'背景颜色
backgroundOpacitynumber1背景颜色的不透明度
spacenumber4外圈和内圈之间的空间
toFixednumber0在标题中使用固定的数字符号
renderOnClickbooleantrue渲染组件时单击
unitsstring'%'单位显示在标题旁边
unitsFontSizestring'10'单位的字体大小
unitsColorstring'#444444'单位的字体颜色
outerStrokeWidthnumber8外圈的行程宽度(进度圈)
outerStrokeColorsting'#78C000'外圈的笔触颜色
outerStrokeLinecapsting'round'外圈的笔画线条。可能的值(屁股,圆形,方形,继承)
innerStrokeWidthnumber4内圈的行程宽度
innerStrokeColorsting'#C7E596'内圈的笔触颜色
titlestring|Array'auto'文字显示为标题。当标题等于'自动'时显示百分比。
titleFormatFunctionundefined一个回调函数来格式化标题。它返回一个字符串或一个字符串数组。
titleColorstring'#444444'标题的字体颜色
titleFontSizestring'20'标题的字体大小
subtitlestring|Array'Percent'文字显示为副标题
subtitleFormatFunctionundefined一个回调函数来格式化字幕。它返回一个字符串或一个字符串数组。
subtitleColorstring'#A9A9A9'字幕的字体颜色
subtitleFontSizestring'10'字幕的字体大小
animationbooleantrue渲染时是否为外部圆圈设置动画
animateTitlebooleantrue是否在渲染时为标题添加动画
animateSubtitlebooleanfalse是否在渲染时为字幕添加动画
animationDurationnumber500动画持续时间以微秒为单位
classstring''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程序设计有所帮助。


新闻标题:angular4+百分比进度显示插件用法示例
链接地址:http://scyanting.com/article/pdijcj.html