syncfusion-angular-circular-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Circular Gauge

实现Syncfusion Angular Circular Gauge

When to Use This Skill

何时使用此技能

Use the Circular Gauge skill when you need to:

Display radial metrics: Temperature, RPM, speed, pressure, or performance indicators
Build dashboards: KPI dashboards, monitoring systems, real-time data visualization
Create speedometer gauges: Visual representation of continuous values within a range
Show progress or status: Multi-step processes, completion percentages, status indicators
Implement interactive gauges: Draggable pointers, range indicators, user-controlled values
Customize gauge appearance: Multiple styles, themes, animations, and layout options

在以下场景中使用Circular Gauge技能：

展示径向指标： 温度、转速、速度、压力或性能指标
构建仪表板： KPI仪表板、监控系统、实时数据可视化
创建速度表： 可视化展示范围内的连续数值
显示进度或状态： 多步骤流程、完成百分比、状态指示器
实现交互式仪表盘： 可拖拽指针、范围指示器、用户可控数值
自定义仪表盘外观： 多种样式、主题、动画和布局选项

Component Overview

组件概述

Syncfusion's Circular Gauge component provides a flexible, feature-rich control for displaying radial data visualization. Key capabilities include:

Feature	Description
Axes	Customizable circular axes with configurable start/end angles, labels, ticks, and ranges
Pointers	Three pointer types: Needle (with cap/tail), RangeBar (fill-based), Marker (shapes or images)
Ranges	Colored zones to highlight value intervals with gradient support
Annotations	Place text, shapes, or images at specific positions on the gauge
Animations	Smooth animations for gauge elements on load and value changes
User Interaction	Draggable pointers, tooltips, click events, and dynamic value updates
Responsive Design	Adapts to container size with flexible sizing options
Multiple Axes	Support for multiple concurrent axes with independent ranges and pointers

Syncfusion的Circular Gauge组件为径向数据可视化提供了灵活且功能丰富的控件。核心功能包括：

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

Documentation and Navigation Guide

文档与导航指南

Select the reference that matches your current need:

-### API Reference 📄 Read: references/api-reference.md

根据你的需求选择对应的参考文档：

Getting Started

API参考

📄 Read: references/getting-started.md

Installation and package setup (Ivy and ngcc versions)
Module registration and service providers
Basic gauge implementation
Setting pointer values
Quick integration examples

When to read: First time setup, installation issues, basic gauge rendering

📄 阅读： references/api-reference.md

Axes Configuration

快速入门

📄 Read: references/axes-configuration.md

Axis customization (line style, background, colors)
Angles and direction (clockwise/anticlockwise, start/end angles)
Axis radius (pixel-based and percentage-based sizing)
Ticks configuration (major/minor ticks, position, offset, styling)
Labels (font, positioning, formats, angle rotation, smart label handling)
Minimum/maximum value ranges
Multiple axes on single gauge

When to read: Configuring gauge layout, adjusting tick/label appearance, positioning elements

📄 阅读： references/getting-started.md

安装与包设置（Ivy和ngcc版本）
模块注册与服务提供商
基础仪表盘实现
设置指针数值
快速集成示例

阅读时机： 首次设置、安装问题、基础仪表盘渲染

Pointers and Types

轴配置

📄 Read: references/pointers-and-types.md

Pointer types overview (Needle, RangeBar, Marker)
Needle pointers (radius, cap customization, tail length, width variation)
RangeBar pointers (bar-style indicators, rounded corners)
Marker pointers (shapes: circle, rectangle, triangle, diamond; custom images)
Pointer dragging (global enable/disable, individual pointer configuration)
Multiple pointers on single axis
Pointer animation (enable, duration, timing)
Gradient colors (linear and radial gradients)

When to read: Choosing pointer type, customizing pointer appearance, adding user interaction

📄 阅读： references/axes-configuration.md

轴自定义（线条样式、背景、颜色）
角度与方向（顺时针/逆时针、起始/结束角度）
轴半径（基于像素和百分比的尺寸设置）
刻度配置（主次刻度、位置、偏移、样式）
标签（字体、定位、格式、角度旋转、智能标签处理）
最小/最大数值范围
单个仪表盘上的多轴设置

阅读时机： 配置仪表盘布局、调整刻度/标签外观、定位元素

Ranges and Styling

指针与类型

📄 Read: references/ranges-and-styling.md

Range basics (start/end values, colored zones)
Range customization (color, thickness, radius)
Multiple ranges on single axis
Rounded corner radius for visual polish
Range positioning (inside/outside axis)
Range dragging functionality
Gradient support (linear and radial)
Applying range colors to ticks and labels

When to read: Adding colored zones, creating layered visualizations, styling zones

📄 阅读： references/pointers-and-types.md

指针类型概述（Needle、RangeBar、Marker）
Needle指针（半径、帽自定义、尾部长度、宽度变化）
RangeBar指针（条形指示器、圆角）
Marker指针（形状：圆形、矩形、三角形、菱形；自定义图片）
指针拖拽（全局启用/禁用、单个指针配置）
单轴上的多指针
指针动画（启用、时长、时序）
渐变颜色（线性和径向渐变）

阅读时机： 选择指针类型、自定义指针外观、添加用户交互

Appearance and Animation

范围与样式

📄 Read: references/appearance-and-animation.md

Gauge title (text, font styling, positioning)
Gauge positioning (centerX, centerY in pixels or percentage)
Background and border customization
Margin and spacing configuration
Gauge dimensions (responsive sizing, fixed dimensions)
Animation (global animationDuration for all elements, pointer-specific animation)
Radius calculation for semi/quarter circular gauges
Creating non-circular gauge layouts

When to read: Styling gauge container, enabling animations, creating themed displays

📄 阅读： references/ranges-and-styling.md

范围基础（起始/结束数值、彩色区域）
范围自定义（颜色、厚度、半径）
单轴上的多范围
圆角半径优化视觉效果
范围定位（轴内侧/外侧）
范围拖拽功能
渐变支持（线性和径向）
将范围颜色应用于刻度和标签

阅读时机： 添加彩色区域、创建分层可视化、样式化区域

Annotations and Interaction

外观与动画

📄 Read: references/annotations-and-interaction.md

Annotations (custom HTML/elements, positioning via radius and angle)
Sub-gauges (nested gauges within annotations)
Tooltips (hover information, custom tooltip content)
User interaction events (pointer drag, value change, gauge interaction)
Print and export functionality
Internationalization and localization
Accessibility features (WCAG compliance, keyboard navigation)

When to read: Adding custom content, handling user interactions, accessible gauge implementation

📄 阅读： references/appearance-and-animation.md

仪表盘标题（文本、字体样式、定位）
仪表盘定位（centerX、centerY的像素或百分比设置）
背景与边框自定义
边距与间距配置
仪表盘尺寸（响应式尺寸、固定尺寸）
动画（所有元素的全局animationDuration、指针专属动画）
半圆/四分之一圆仪表盘的半径计算
创建非圆形仪表盘布局

阅读时机： 样式化仪表盘容器、启用动画、创建主题化展示

Quick Start Example

注释与交互

Basic Circular Gauge with Single Pointer:

typescript

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';
}

Steps:

Install package:

npm install @syncfusion/ej2-angular-circulargauge

Import
```
CircularGaugeModule
```
in component
Add services if needed (GaugeTooltipService, etc.)
Configure
```
ejs-circulargauge
```
with axes and pointers
Set pointer
```
value
```
and
```
type
```

📄 阅读： references/annotations-and-interaction.md

注释（自定义HTML/元素、通过半径和角度定位）
子仪表盘（嵌套在注释中的仪表盘）
工具提示（悬停信息、自定义工具提示内容）
用户交互事件（指针拖拽、数值变化、仪表盘交互）
打印与导出功能
国际化与本地化
无障碍功能（WCAG合规、键盘导航）

阅读时机： 添加自定义内容、处理用户交互、实现无障碍仪表盘

Common Patterns

快速入门示例

Pattern 1: Speedometer Display

—

Create a speedometer gauge with ranges indicating speed zones (safe, warning, danger):

typescript

// Basic structure:
<ejs-circulargauge>
  <e-axes>
    <e-axis [minimum]='0' [maximum]='200'>
      <!-- Green range (0-80): Safe -->
      <!-- Yellow range (80-150): Caution -->
      <!-- Red range (150-200): Danger -->
      <e-ranges>
        <e-range [start]='0' [end]='80' color='green'></e-range>
        <e-range [start]='80' [end]='150' color='orange'></e-range>
        <e-range [start]='150' [end]='200' color='red'></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]='speedValue' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-cirulargauge>

Reference: ranges-and-styling.md (multiple ranges), pointers-and-types.md (needle pointer)

带单个指针的基础圆形仪表盘：

typescript

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';
}

步骤：

安装包：

npm install @syncfusion/ej2-angular-circulargauge

在组件中导入
```
CircularGaugeModule
```
按需添加服务（如GaugeTooltipService）
配置
```
ejs-circulargauge
```
的轴和指针
设置指针的
```
value
```
和
```
type
```

Pattern 2: Multiple Metrics with Multiple Axes

常见模式

—

模式1：速度表展示

Display multiple related metrics (inner and outer axes) simultaneously:

typescript

// Configure multiple axes:
<e-axes>
  <e-axis [radius]='60%'><!-- Outer axis --></e-axis>
  <e-axis [radius]='40%'><!-- Inner axis --></e-axis>
</e-axes>

Reference: axes-configuration.md (multiple axes section)

创建带速度区间（安全、警告、危险）的速度表仪表盘：

typescript

// 基础结构:
<ejs-circulargauge>
  <e-axes>
    <e-axis [minimum]='0' [maximum]='200'>
      <!-- 绿色范围(0-80): 安全 -->
      <!-- 黄色范围(80-150): 警告 -->
      <!-- 红色范围(150-200): 危险 -->
      <e-ranges>
        <e-range [start]='0' [end]='80' color='green'></e-range>
        <e-range [start]='80' [end]='150' color='orange'></e-range>
        <e-range [start]='150' [end]='200' color='red'></e-range>
      </e-ranges>
      <e-pointers>
        <e-pointer [value]='speedValue' type='Needle'></e-pointer>
      </e-pointers>
    </e-axis>
  </e-axes>
</ejs-cirulargauge>

参考： ranges-and-styling.md（多范围）、pointers-and-types.md（Needle指针）

Pattern 3: Interactive Gauge with Draggable Pointers

模式2：多轴展示多指标

Allow users to adjust values by dragging the pointer:

typescript

// Enable dragging globally or per-pointer:
<ejs-circulargauge [enablePointerDrag]='true'>
  <!-- or per-pointer: -->
  <e-pointer [enableDrag]='true'></e-pointer>
</ejs-circulargauge>

Reference: pointers-and-types.md (dragging pointer section)

同时展示多个相关指标（内外轴）：

typescript

// 配置多轴:
<e-axes>
  <e-axis [radius]='60%'><!-- 外轴 --></e-axis>
  <e-axis [radius]='40%'><!-- 内轴 --></e-axis>
</e-axes>

参考： axes-configuration.md（多轴章节）

Pattern 4: Animated Gauge Load

模式3：带可拖拽指针的交互式仪表盘

Add smooth entrance animations when gauge loads:

typescript

// Enable animation for all elements:
<ejs-circulargauge [animationDuration]='2000'>
  <!-- Entire gauge animates in over 2 seconds -->
</ejs-circulargauge>

Reference: appearance-and-animation.md (animation section)

允许用户通过拖拽指针调整数值：

typescript

// 全局或按指针启用拖拽:
<ejs-circulargauge [enablePointerDrag]='true'>
  <!-- 或按指针设置: -->
  <e-pointer [enableDrag]='true'></e-pointer>
</ejs-circulargauge>

参考： pointers-and-types.md（指针拖拽章节）

Key Concepts

模式4：仪表盘加载动画

Angles and Direction

—

The circular gauge rotates in a circular plane. You control the visible arc using:

startAngle: Beginning of the arc (default: 200°)
endAngle: End of the arc (default: 160°)
direction: ClockWise or AntiClockWise

This lets you create full circles (0-360°) or partial gauges (semi-circles, quarter-circles).

添加仪表盘加载时的平滑入场动画：

typescript

// 为所有元素启用动画:
<ejs-circulargauge [animationDuration]='2000'>
  <!-- 整个仪表盘在2秒内完成动画入场 -->
</ejs-circulargauge>

参考： appearance-and-animation.md（动画章节）

Radius and Sizing

核心概念

—

角度与方向

Gauges use flexible sizing:

Pixel-based: Fixed size (e.g.,
```
500px
```
)
Percentage-based: Relative to container (e.g.,
```
80%
```
)

Set radius on axes, ranges, pointers, and annotations independently.

圆形仪表盘在圆形平面内旋转。你可以通过以下参数控制可见弧度：

startAngle: 弧度起始位置（默认：200°）
endAngle: 弧度结束位置（默认：160°）
direction: 顺时针或逆时针

这让你可以创建完整圆形（0-360°）或部分仪表盘（半圆、四分之一圆）。

Pointers vs Ranges

半径与尺寸

Pointers: Show a specific value (like a speedometer needle)
Ranges: Show zones or intervals (like color-coded areas)

Use together for rich visualizations (e.g., pointer shows current speed, ranges show safe/warning zones).

仪表盘支持灵活的尺寸设置：

基于像素: 固定尺寸（例如
```
500px
```
）
基于百分比: 相对于容器的尺寸（例如
```
80%
```
）

可独立为轴、范围、指针和注释设置半径。

Animations

指针 vs 范围

Animation affects:

Axis line rendering (follows direction)
Ticks and labels
Ranges
Pointers (individual control available)
Annotations

Set

animationDuration

in milliseconds (0 = disabled).

指针: 展示特定数值（如速度表指针）
范围: 展示区间或区域（如彩色编码区域）

两者结合可实现丰富的可视化效果（例如指针显示当前速度，范围显示安全/警告区间）。

Multiple Pointers & Axes

动画

Support n+ pointers and axes:

Multiple pointers: Show different metrics (humidity + temperature)
Multiple axes: Layers of information (inner/outer rings)

Each axis has independent ranges, pointers, and styling.

Ready to implement? Start with getting-started.md for installation, then navigate to feature-specific references as needed.

动画影响以下元素：

轴线渲染（遵循方向）
刻度和标签
范围
指针（支持单独控制）
注释

以毫秒为单位设置

animationDuration

（0表示禁用）。

—

多指针与多轴

—

支持多个指针和轴：

多指针: 展示不同指标（湿度+温度）
多轴: 多层信息（内外环）

每个轴拥有独立的范围、指针和样式。

syncfusion-angular-circular-gauge

Original

Translation

Implementing Syncfusion Angular Circular Gauge

实现Syncfusion Angular Circular Gauge

Table of Contents

目录

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

API参考

Axes Configuration

快速入门

Pointers and Types

轴配置

Ranges and Styling

指针与类型

Appearance and Animation

范围与样式

Annotations and Interaction

外观与动画

Quick Start Example

注释与交互

Common Patterns

快速入门示例

Pattern 1: Speedometer Display

Pattern 2: Multiple Metrics with Multiple Axes

常见模式

模式1：速度表展示

Pattern 3: Interactive Gauge with Draggable Pointers

模式2：多轴展示多指标

Pattern 4: Animated Gauge Load

模式3：带可拖拽指针的交互式仪表盘

Key Concepts

模式4：仪表盘加载动画

Angles and Direction

Radius and Sizing

核心概念

角度与方向

Pointers vs Ranges

半径与尺寸

Animations

指针 vs 范围

Multiple Pointers & Axes

动画

多指针与多轴