syncfusion-angular-circular-gauge

用途

Syncfusion Angular Circular Gauge 技能用于在 Angular 应用中实现 Syncfusion 的圆形仪表盘（Circular Gauge）组件，面向径向数据可视化场景。资料列出的适用场景包括：展示温度、RPM、速度、压力或性能指标等径向数值；构建 KPI 仪表盘、监控系统与实时数据可视化；制作速度表形式的连续数值可视化；展示多步骤流程、完成百分比或状态指示；实现带可拖动指针、范围指示和用户可控值的交互式仪表盘；以及对仪表盘外观进行多种样式、主题、动画和布局的自定义。

主要能力

组件提供的主要能力如下（依据资料）：

轴（Axes）：可自定义的圆形轴，支持配置起止角度、标签、刻度和范围。
指针（Pointers）：支持三种指针类型——Needle（带指针帽和尾部的指针）、RangeBar（填充式）、Marker（形状或图片）。
范围（Ranges）：用彩色区域高亮数值区间，支持渐变。
注释（Annotations）：在仪表盘特定位置放置文本、形状或图片。
动画（Animations）：加载和值变化时对仪表盘元素提供平滑动画。
用户交互：可拖动指针、工具提示、点击事件和动态值更新。
响应式设计：通过灵活的尺寸选项适配容器大小。
多轴（Multiple Axes）：支持多个并发轴，各自拥有独立的范围和指针。

使用方式

资料给出的快速开始步骤如下：

安装包：npm install @syncfusion/ej2-angular-circulargauge
在组件中导入 CircularGaugeModule
按需添加服务（如 GaugeTooltipService 等）
使用 ejs-circulargauge 配置轴（e-axes / e-axis）与指针（e-pointers / e-pointer）
设置指针的值和类型

快速开始示例代码：

import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-circulargauge';
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  imports: [CircularGaugeModule],
  providers: [GaugeTooltipService],
  standalone: true,
  selector: 'app-gauge',
  template: `
    <ejs-circulargauge id='gauge-container' [title]='title'>
      <e-axes>
        <e-axis [startAngle]='200' [endAngle]='160' [minimum]='0' [maximum]='100'>
          <e-pointers>
            <e-pointer [value]='75' type='Needle'></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-circulargauge>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'Speed Gauge';
}

文档还提供了按需求查阅的参考文档导航：API 参考（references/api-reference.md）；入门（references/getting-started.md）涵盖 Ivy 与 ngcc 版本的安装与包设置、模块注册与服务提供者、基础仪表盘实现、设置指针值及快速集成示例；轴配置（references/axes-configuration.md）涵盖轴线样式与背景颜色、角度与方向（顺时针/逆时针、起止角度）、轴半径（像素或百分比）、刻度配置（主/次刻度、位置、偏移、样式）、标签（字体、定位、格式、角度旋转、智能标签处理）、最小/最大值范围以及单仪表盘多轴；指针与类型（references/pointers-and-types.md）涵盖指针类型概览、Needle 指针（半径、指针帽定制、尾部长度、宽度变化）、RangeBar 指针、Marker 指针（圆形、矩形、三角形、菱形及自定义图片）、指针拖动（全局启用/禁用、单指针配置）、单轴多指针、指针动画与渐变颜色；范围与样式（references/ranges-and-styling.md）涵盖范围基础（起止值、彩色区域）、范围定制（颜色、厚度、半径）、单轴多范围、圆角半径、范围位置（轴内/轴外）、范围拖动、渐变支持以及将范围颜色应用于刻度和标签；外观与动画（references/appearance-and-animation.md）涵盖仪表盘标题、定位（centerX、centerY，像素或百分比）、背景与边框定制、边距与间距、仪表盘尺寸（响应式或固定尺寸）、动画与半径计算以及非圆形仪表盘布局；注释与交互（references/annotations-and-interaction.md）涵盖注释（自定义 HTML/元素、通过半径和角度定位）、子仪表盘、工具提示、用户交互事件、打印与导出、国际化与本地化以及无障碍功能（WCAG 合规、键盘导航）。

常见的模式包括：速度表显示（用范围区分安全/警告/危险区间）、多指标多轴显示（内轴与外轴）、支持指针拖动的交互式仪表盘，以及带动画加载的仪表盘。资料还说明角度与方向通过 startAngle（默认 200°）、endAngle（默认 160°）和 direction（ClockWise 或 AntiClockWise）控制可见弧，可实现整圆或半圆、四分之一圆等部分仪表盘；尺寸可采用像素固定值或相对容器的百分比，半径可分别在轴、范围、指针和注释上独立设置；指针用于显示具体数值，范围用于显示区间，二者可结合使用；动画影响轴线、刻度与标签、范围、指针和注释，通过以毫秒为单位设置 animationDuration（0 表示禁用）控制；支持多个指针和多个轴，每个轴拥有独立的范围、指针和样式。

适用场景

适合在 Angular 应用中使用 Syncfusion 组件构建仪表盘、监控系统、实时数据展示、速度表、进度与状态指示等径向数据可视化界面，尤其是需要指针拖动交互、多轴多指针叠加、范围分区、注释与动画的场景。

限制

资料未提供该组件或技能的具体收费与价格、支持的浏览器与具体平台范围、性能表现、实际渲染效果等细节，这些内容暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制