Angular 2+的量规组件 - ng2-gauge

Angular 2+的量规组件 - ng2-gauge
插件名称 ng2-gauge
发布时间 2020年6月3日
插件作者 hawkgs

一个适用于Angular 2+的漂亮规格组件,适用于构建虚拟仪表板。

安装:

# NPM
$ npm install ng2-gauge --save

使用:

您应该将导入GaugeModule到所需的模块中:

import { NgModule } from '@angular/core';
import { Ng2GaugeModule } from 'ng2-gauge';

@NgModule({
    imports : [CommonModule, Ng2GaugeModule, ...],
})
export class SharedModule {}

然后,您可以简单地在模板中使用组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <nga-ng2-gauge
      [max]="9000"
      [input]="input"
    </nga-ng2-gauge>`
})
export class MyComponent {
  input: number;
}

选项

该组件提供以下选项的列表:

  • max: number(必需)-量规的最大值。建议使用可以被100、1000等除的数字。
  • input: number (必需)-仪表的当前值。
  • unit: string -压力表的单位(即mph,psi等)
  • size: number (以像素为单位;默认为400)-量规的大小/宽度。
  • start: number (以度为单位;默认为225)-缩放的开始/开始
  • end: number (以度为单位;默认为135)-比例尺的终点
  • showDigital: boolean -将当前值显示为仪表内的数字
  • lightTheme: boolean -切换到浅色主题
  • light: number -达到指定的限制时显示红灯
  • sectors: Sectors[] -定义指定扇区的颜色
  • factor: number (不推荐)-更改比例因子
  • config: GaugeConfig(不推荐)-更改默认配置;这可能会导致意外行为;