angular图表库

angular图表库
插件名称 angular-gauge-chart-library
发布时间 2020年6月7日
插件作者 recogizer

仪表图库的角度包装器,可帮助您使用Angular创建美观而灵活的仪表图。

安装:

# NPM
$ npm install @recogizer/angular-gauge-chart --save

使用:

导入angular-gauge-chart模块并添加为声明。

import { GaugeChartModule } from 'angular-gauge-chart'

imports: [
    GaugeChartModule,
]

在您的html文件中创建一个用于定位量规的元素:

<rg-gauge-chart
    [canvasWidth]="canvasWidth"
    [needleValue]="needleValue"
    [centralLabel]="centralLabel"
    [options]="options"
    [name]="name"
    [bottomLabel]="bottomLabel"></rg-gauge-chart>

现在您可以绘制自己的仪表了。

只需将以下代码复制到您的ts文件中:

public canvasWidth = 300
public needleValue = 65
public centralLabel = ''
public name = 'Gauge chart'
public bottomLabel = '65'
public options = {
    hasNeedle: true,
    needleColor: 'gray',
    needleUpdateSpeed: 1000,
    arcColors: ['rgb(44, 151, 222)', 'lightgray'],
    arcDelimiters: [30],
    rangeLabel: ['0', '100'],
    needleStartValue: 50,
}

选项

canvasWidth:number

needleValue:number

centralLabel:string

options  = {…}:

名称值范围描述
hasNeedletrue / false确定是否显示针
needleColor CSS支持的值用指定的颜色为针着色
needleUpdateSpeed大于0的数字确定针更新动画的速度
arcColorsCSS支持的值数组用指定的颜色给量规上色
arcDelimiters从0到100的数字数组以升序指定量规的定界符
rangeLabel两个字符串的数组描绘了图表两侧的量规范围
centralLabel string描述仪表内部标签

name ?:string(将显示在仪表上方)

nameFont ?:number(名称的字体大小)

bottomLabel ?: string (将在量具下方显示)

bottomLabelFont ?:number(底部标签的字体大小)