angular4+百分比进度显示插件用法示例
程序员文章站
2022-06-24 17:36:48
本文实例讲述了angular4+百分比进度显示插件用法。分享给大家供大家参考,具体如下:
效果展示:
一、在npm社区中搜索 :
ng-circle-progre...
本文实例讲述了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类型的任意值) }}
的方式调用。