angular4+百分比進度顯示插件用法示例

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

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

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

效果展示：

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

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	動畫持續(xù)時間以微秒為單位
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程序設計有所幫助。

您可能感興趣的文章: