Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。
概览
团队为何搜索这个库
当你的 Angular 应用需要可视化单个数值——上传进度、容量、分数或评分——而又不想引入完整的图表库时，请使用 ng-hub-ui-metrics。
安装
npm install ng-hub-ui-metrics跳转到
适用于
- 上传与任务进度
- 磁盘、内存与容量计量表
- 质量分数与评分
- 仪表盘 KPI 环形图
关于 metrics
ng-hub-ui-metrics 是一个小型的展示型基元家族。`hub-progress` 呈现一个确定或不确定的线性进度条；`hub-meter` 遵循 HTML `<meter>` 语义，将一个标量按 `[low, high]` 平台区间进行分级；`hub-ring` 将归一化分数绘制为一段 SVG 弧，并带有可选的投影说明文字。这些组件都不会硬编码颜色——它们读取共享的 `--hub-sys-color-*` 族，并暴露 `--hub-progress-*`、`--hub-meter-*` 和 `--hub-ring-*` 自定义属性供主题定制。
功能指南
线性进度
一个确定或不确定的进度条，具有尺寸刻度、语义色彩以及可选的数值标签。
示例:
进度条
进度条
分级计量表
一个遵循 HTML <meter> 语义的仪表，会根据相对于 low/high 平台区间及最优点的所在区段为自身重新着色。
示例:
分级计量表
分级计量表
圆环形仪表
一个用于呈现归一化分数的 SVG 环，具有颜色阈值以及通过 <ng-content> 投影的说明文字。
示例:
环形仪表
环形仪表
主题化
用语义化的 `color` 输入（映射到 ds 的 `--hub-sys-color-*` 系列）为单个基元着色，或用一次调用的 SCSS mixin `hub-metrics-theme()` 和 `--hub-*` 自定义属性一次性为三者重新着色。
示例:
使用 mixin 和语义颜色进行主题化
使用 mixin 和语义颜色进行主题化
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)核心特性
最近更改
Version 22.0.0 - 7/5/26, 12:00 AM
added: HubProgressComponent: a determinate/indeterminate linear progress bar with a size scale, semantic colours and an optional value label.
added: HubMeterComponent: a graded gauge following HTML <meter> semantics that selects its fill band from the low/high plateau and the optimum point.
added: HubRingComponent: a circular SVG ring gauge with colour thresholds, a projected centre caption and exportAs "hubGauge".
added: CSS-variable theming surface (--hub-progress-*, --hub-meter-*, --hub-ring-*) mapped onto the shared --hub-sys-color-* token families.