ngx-justgage 是一个支持 Angular 框架的仪表盘库，它基于 justgage 库，可以轻松地创建漂亮、定制化的仪表板。如果你需要展示数据以及对于数据进行可视化呈现，ngx-justgage 可能会是一个不错的选择。
安装
安装 ngx-justgage 包：
npm install ngx-justgage --save
并在需要使用的模块中引入：
import { NgxJustGageModule } from 'ngx-justgage';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxJustGageModule],
bootstrap: [AppComponent]
})
export class AppModule {}使用
在模版文件中加入标签：
<ngx-justgage [value]="value" [options]="options"></ngx-justgage>
其中，value 是显示数值，可以是动态绑定；options 是配置选项，下面会详细介绍。
配置
ngx-justgage 提供了大量的配置选项，下面介绍其中一些比较重要的。
min、max
这两个选项用于设置仪表盘的最小值和最大值，可以通过双向绑定来变更它们。
<ngx-justgage [value]="value" [options]="{ min: 0, max: 100 }"></ngx-justgage>gaugeColor、levelColors
这两个选项用于控制所显示数值的颜色。gaugeColor 用于控制仪表盘轮廓的颜色，levelColors 用于控制仪表盘的渐变色。
<ngx-justgage [value]="value" [options]="{ gaugeColor: '#ddd', levelColors: ['#f00', '#ff0', '#0f0'] }"></ngx-justgage>label
label 选项可以添加一个文本标签，用于描述值的类型以及单位。
<ngx-justgage [value]="value" [options]="{ label: 'Pounds' }"></ngx-justgage>customSectors
customSectors 可以添加自定义的刻度线，需要提供一个数组，包含每个刻度线所在位置和颜色。
<ngx-justgage [value]="value" [options]="{ customSectors: [{ color: '#f00', lo: 0, hi: 33 }, { color: '#ff0', lo: 33, hi: 66 }, { color: '#0f0', lo: 66, hi: 100 }] }"></ngx-justgage>示例
下面是一个完整的示例代码，用于展示 ngx-justgage 的基础用法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -------------- --------------- ------------------------------------
--
------ ----- ------------ -
----- - ---
------- - -
---- --
---- ----
----------- -------
------------ -------- ------- --------
------ ---------
-------------- -
- ------ ------- --- -- --- -- --
- ------ ------- --- --- --- -- --
- ------ ------- --- --- --- --- -
-
--
-总结
ngx-justgage 是一个简单易用的 Angular 仪表盘库，可以轻松地创建漂亮、定制化的仪表板。通过本教程，你已经可以掌握 ngx-justgage 基本的用法以及一些重要的配置选项。在实际开发中，你可以根据业务需求，进一步定制化你的仪表板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671081e8991b448e3506