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程序设计有所帮助。