angular4+百分比進(jìn)度顯示插件用法示例

更新時(shí)間：2019年05月05日 11:11:45 作者：ngsave

這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下

本文實(shí)例講述了angular4+百分比進(jìn)度顯示插件用法。分享給大家供大家參考，具體如下：

效果展示：

一、在npm社區(qū)中搜索：

ng-circle-progress

二、在項(xiàng)目目錄下安裝下載

npm install ng-circle-progress --save

三、在app.module.ts文件中導(dǎo)入NgCircleProgressModule模塊，

并在@NgModule裝飾器中使用NgCircleProgressModule.forRoot()的方法,里面的參數(shù)

是個(gè)對(duì)象字面量

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

四、在app.component.html中導(dǎo)入標(biāo)簽

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

其中參數(shù)有：

選項(xiàng)	類型	默認(rèn)	描述
percent	number	0	您想要顯示的百分比數(shù)
maxPercent	number	1000	您想要顯示的最大百分比數(shù)
radius	number	90	圓的半徑
clockwise	boolean	true	是否順時(shí)針或逆時(shí)針旋轉(zhuǎn)
showTitle	boolean	true	是否顯示標(biāo)題
showSubtitle	boolean	true	是否顯示字幕
showUnits	boolean	true	是否顯示單位
showBackground	boolean	true	是否顯示背景圈
showInnerStroke	boolean	true	是否顯示內(nèi)部中風(fēng)
backgroundStroke	string	'transparent'	背景描邊顏色
backgroundStrokeWidth	number	0	背景圈的筆畫寬度
backgroundPadding	number	5	填充的背景圈子
backgroundColor	string	'transparent'	背景顏色
backgroundOpacity	number	1	背景顏色的不透明度
space	number	4	外圈和內(nèi)圈之間的空間
toFixed	number	0	在標(biāo)題中使用固定的數(shù)字符號(hào)
renderOnClick	boolean	true	渲染組件時(shí)單擊
units	string	'%'	單位顯示在標(biāo)題旁邊
unitsFontSize	string	'10'	單位的字體大小
unitsColor	string	'#444444'	單位的字體顏色
outerStrokeWidth	number	8	外圈的行程寬度（進(jìn)度圈）
outerStrokeColor	sting	'#78C000'	外圈的筆觸顏色
outerStrokeLinecap	sting	'round'	外圈的筆畫線條?？赡艿闹担ㄆü?，圓形，方形，繼承）
innerStrokeWidth	number	4	內(nèi)圈的行程寬度
innerStrokeColor	sting	'#C7E596'	內(nèi)圈的筆觸顏色
title	string\|Array	'auto'	文字顯示為標(biāo)題。當(dāng)標(biāo)題等于'自動(dòng)'時(shí)顯示百分比。
titleFormat	Function	undefined	一個(gè)回調(diào)函數(shù)來(lái)格式化標(biāo)題。它返回一個(gè)字符串或一個(gè)字符串?dāng)?shù)組。
titleColor	string	'#444444'	標(biāo)題的字體顏色
titleFontSize	string	'20'	標(biāo)題的字體大小
subtitle	string\|Array	'Percent'	文字顯示為副標(biāo)題
subtitleFormat	Function	undefined	一個(gè)回調(diào)函數(shù)來(lái)格式化字幕。它返回一個(gè)字符串或一個(gè)字符串?dāng)?shù)組。
subtitleColor	string	'#A9A9A9'	字幕的字體顏色
subtitleFontSize	string	'10'	字幕的字體大小
animation	boolean	true	渲染時(shí)是否為外部圓圈設(shè)置動(dòng)畫
animateTitle	boolean	true	是否在渲染時(shí)為標(biāo)題添加動(dòng)畫
animateSubtitle	boolean	false	是否在渲染時(shí)為字幕添加動(dòng)畫
animationDuration	number	500	動(dòng)畫持續(xù)時(shí)間以微秒為單位
class	string	''	SVG元素的CSS類名稱

// 字幕格式回調(diào)示例
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頁(yè)面以插值表達(dá)式{{ formatSubtitle(number類型的任意值) }}的方式調(diào)用。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: