Angular 4+中创建SVG量规

Angular 4+中创建SVG量规
插件名称 angular-gauge
发布时间 2020年7月14日
插件作者 mattlewis92

这是SVG-gauge库的Angular 4+,可帮助您在Web应用程序上生成基于SVG的量规。

安装:

# NPM
$ npm install angular-gauge --save

用法:

将SVG量规导入到ngmodule中。

import { Component, NgModule } from '@angular/core';
import { GaugeModule } from 'angular-gauge';

@NgModule({
  imports: [
    GaugeModule.forRoot()
  ]
})
export class MyModule {}

在您的应用程序组件中使用。

@Component({
  template: `
    <mwl-gauge
      [max]="100"
      [dialStartAngle]="-90"
      [dialEndAngle]="-90.001"
      [value]="50"
      [animated]="true"
      [animationDuration]="1">
    </mwl-gauge>
  `
})
export class MyComponent {}

选项和事件监听器

/**
 * 以度为单位的刻度盘启动角度
 */
@Input() dialStartAngle: number;

/**
 * 结束刻度盘的角度(以度为单位)。该值必须小于DialStartAngle 
 */
@Input() dialEndAngle: number;

/**
 * 量规的半径
 */
@Input() radius: number;

/**
 * 量规的最大值
 */
@Input() max: number;

/**
 * 返回字符串标签的函数,该标签将在中间显示。该函数将被传递当前值
 */
@Input() label: (value: number) => string;

/**
 * 是否在量规中心显示值
 */
@Input() showValue: boolean;

/**
 * 仪表的CSS类
 */
@Input() gaugeClass: string;

/**
 * 仪表盘的CSS类
 */
@Input() dialClass: string;

/**
 * 量表的填充(值刻度)的CSS类
 */
@Input() valueDialClass: string;

/**
 *  仪表文本的CSS类
 */
@Input() valueTextClass: string;

/**
 * 量规的值
 */
@Input() value: number;

/**
 * 是否为更改量规设置动画
 */
@Input() animated: boolean;

/**
 * 以秒为单位的动画持续时间
 */
@Input() animationDuration: number;

/**
 * 在创建量规时调用
 */
@Output() gaugeCreated: EventEmitter<{gauge: any}> = new EventEmitter();