syncfusion-blazor-circular-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor CircularGauge

实现Syncfusion Blazor CircularGauge

A comprehensive guide for implementing circular gauge components in Blazor applications. CircularGauge provides radial data visualization with customizable axes, pointers, ranges, annotations, and interactive features.

一份在Blazor应用中实现圆形仪表组件的综合指南。CircularGauge提供可自定义轴、指针、范围、注释和交互功能的径向数据可视化能力。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Dashboard Gauges: Create KPI dashboards with circular metric displays
Speedometers/Tachometers: Build vehicle instrument panels or speed indicators
Temperature/Pressure Indicators: Display environmental or industrial sensor data
Progress Visualization: Show circular progress indicators or completion status
Status Displays: Create color-coded status gauges with ranges (red/yellow/green zones)
Multi-Metric Displays: Show multiple values with multiple pointers on a single gauge
Real-Time Monitoring: Display live data updates in a circular format
Interactive Gauges: Allow users to adjust values by dragging pointers
Radial KPIs: Visualize performance metrics in a radial/circular layout

在以下场景中使用此技能：

仪表板仪表：创建带有圆形指标展示的KPI仪表板
速度表/转速表：构建车辆仪表盘或速度指示器
温度/压力指示器：展示环境或工业传感器数据
进度可视化：显示圆形进度指示器或完成状态
状态展示：创建带有颜色编码范围（红/黄/绿区域）的状态仪表
多指标展示：在单个仪表上用多个指针显示多个数值
实时监控：以圆形格式展示实时数据更新
交互式仪表：允许用户通过拖动指针调整数值
径向KPI：以径向/圆形布局可视化性能指标

Component Overview

组件概述

The Syncfusion Blazor CircularGauge (

SfCircularGauge

) is a data visualization component that displays quantitative information in a circular arc. It supports multiple pointer types, color-coded ranges, custom annotations, legends, and rich interactivity.

Key Capabilities:

Multiple pointer types (needle, range bar, marker)
Configurable axes with custom ranges and angles
Color-coded ranges for visual zones
Annotations with text, images, or HTML content
Tooltips and user interactions
Pointer dragging for value adjustment
Legends for ranges
Animations and transitions
Globalization and RTL support
Accessibility features (WCAG compliant)
Print and export functionality

Syncfusion Blazor CircularGauge（

SfCircularGauge

）是一个数据可视化组件，以圆弧形式展示量化信息。它支持多种指针类型、颜色编码范围、自定义注释、图例和丰富的交互功能。

核心功能：

多种指针类型（针型、范围条、标记型）
可配置轴，支持自定义范围和角度
用于可视化区域的颜色编码范围
支持文本、图片或HTML内容的注释
工具提示和用户交互
可拖动指针调整数值
范围图例
动画和过渡效果
全球化和RTL支持
无障碍功能（符合WCAG标准）
打印和导出功能

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Read this reference when you need to:

Install NuGet packages and set up the component
Configure services and CSS/theme imports
Create your first basic circular gauge
Understand project structure and prerequisites
Run the application with CircularGauge

📄 阅读： references/getting-started.md

在以下场景中阅读此参考文档：

安装NuGet包并设置组件
配置服务和CSS/主题导入
创建第一个基础圆形仪表
了解项目结构和前置条件
运行包含CircularGauge的应用

Axes Configuration

轴配置

📄 Read: references/axes-configuration.md

Read this reference when you need to:

Customize axis appearance (line width, color, background)
Set minimum and maximum values for the scale
Configure axis radius and positioning
Set start and end angles (semi-circle, quarter-circle, custom arcs)
Configure axis direction (clockwise/anticlockwise)
Customize labels (format, font, position, rotation, custom text)
Configure major and minor ticks (intervals, size, styling)
Implement multiple axes on a single gauge

📄 阅读： references/axes-configuration.md

在以下场景中阅读此参考文档：

自定义轴外观（线宽、颜色、背景）
设置刻度的最小值和最大值
配置轴半径和位置
设置起始和结束角度（半圆、四分之一圆、自定义圆弧）
配置轴方向（顺时针/逆时针）
自定义标签（格式、字体、位置、旋转、自定义文本）
配置主刻度和次刻度（间隔、大小、样式）
在单个仪表上实现多轴

Pointers

指针

📄 Read: references/pointers.md

Read this reference when you need to:

Add needle pointers with customizable appearance
Configure needle cap/knob and tail styling
Implement range bar pointers with gradients
Add marker pointers (circle, rectangle, triangle, diamond, image)
Set pointer values and animate pointer movement
Use multiple pointers of different types on one axis
Enable pointer dragging for interactive value adjustment
Position and layer pointers correctly

📄 阅读： references/pointers.md

在以下场景中阅读此参考文档：

添加可自定义外观的针型指针
配置指针帽/旋钮和尾部样式
实现带有渐变效果的范围条指针
添加标记型指针（圆形、矩形、三角形、菱形、图片）
设置指针数值并为指针移动添加动画
在单个轴上使用多种不同类型的指针
启用指针拖动以实现交互式数值调整
正确定位和分层指针

Ranges

范围

📄 Read: references/ranges.md

Read this reference when you need to:

Create color-coded zones on the gauge (e.g., red/yellow/green)
Define range start and end values
Customize range colors, gradients, and styling
Configure range positioning (radius and thickness)
Implement multiple overlapping ranges
Add rounded corners to ranges
Use ranges for status indicators or zone marking

📄 阅读： references/ranges.md

在以下场景中阅读此参考文档：

在仪表上创建颜色编码区域（如红/黄/绿）
定义范围的起始和结束数值
自定义范围颜色、渐变和样式
配置范围位置（半径和厚度）
实现多个重叠范围
为范围添加圆角
使用范围作为状态指示器或区域标记

Annotations

注释

📄 Read: references/annotations.md

Read this reference when you need to:

Add text annotations to display values or labels
Insert HTML content or images as annotations
Position annotations using angle, radius, or X/Y coordinates
Style annotations (font, color, background, borders)
Create multiple annotations on a single gauge
Display dynamic content (e.g., current pointer value)
Add conditional annotations based on gauge state
Center labels showing gauge readings

📄 阅读： references/annotations.md

在以下场景中阅读此参考文档：

添加文本注释以显示数值或标签
插入HTML内容或图片作为注释
使用角度、半径或X/Y坐标定位注释
设置注释样式（字体、颜色、背景、边框）
在单个仪表上创建多个注释
显示动态内容（如当前指针数值）
根据仪表状态添加条件注释
添加显示仪表读数的中心标签

Legend

图例

📄 Read: references/legend.md

Read this reference when you need to:

Enable legends for gauge ranges
Position legends (top, bottom, left, right, custom)
Customize legend appearance (font, colors, shapes, borders)
Implement interactive legends with toggle functionality
Create custom legend templates
Handle legend click events

📄 阅读： references/legend.md

在以下场景中阅读此参考文档：

为仪表范围启用图例
设置图例位置（顶部、底部、左侧、右侧、自定义）
自定义图例外观（字体、颜色、形状、边框）
实现带有切换功能的交互式图例
创建自定义图例模板
处理图例点击事件

Appearance and Styling

外观与样式

📄 Read: references/appearance.md

Read this reference when you need to:

Apply built-in themes (Material, Bootstrap, Fluent, etc.)
Customize colors, backgrounds, and borders
Configure gauge dimensions (width, height, responsive sizing)
Add and style gauge titles
Configure center X/Y positioning
Set up animations (duration, easing)
Implement print and export functionality (image/PDF)
Apply custom styling and CSS classes

📄 阅读： references/appearance.md

在以下场景中阅读此参考文档：

应用内置主题（Material、Bootstrap、Fluent等）
自定义颜色、背景和边框
配置仪表尺寸（宽度、高度、响应式大小）
添加并设置仪表标题样式
配置中心X/Y位置
设置动画（时长、缓动效果）
实现打印和导出功能（图片/PDF）
应用自定义样式和CSS类

User Interaction

用户交互

📄 Read: references/user-interaction.md

Read this reference when you need to:

Enable and customize tooltips
Create custom tooltip templates
Enable pointer dragging for user input
Handle drag events (DragStart, DragMove, DragEnd)
Implement gauge events (Load, Loaded, AnimationComplete, etc.)
Handle AxisLabelRendering and TooltipRendering events
Restrict pointer drag ranges
Create interactive gauges (adjustable temperature, speed controls)

📄 阅读： references/user-interaction.md

在以下场景中阅读此参考文档：

启用并自定义工具提示
创建自定义工具提示模板
启用指针拖动以实现用户输入
处理拖动事件（DragStart、DragMove、DragEnd）
实现仪表事件（Load、Loaded、AnimationComplete等）
处理AxisLabelRendering和TooltipRendering事件
限制指针拖动范围
创建交互式仪表（可调节温度、速度控制）

Globalization

全球化

📄 Read: references/globalization.md

Read this reference when you need to:

Format numbers based on locale
Implement custom number patterns
Localize labels and text
Enable RTL (right-to-left) support
Format currency or date/time values
Integrate CLDR data for internationalization

📄 阅读： references/globalization.md

在以下场景中阅读此参考文档：

根据区域设置格式化数字
实现自定义数字模式
本地化标签和文本
启用RTL（从右到左）支持
格式化货币或日期/时间数值
集成CLDR数据以实现国际化

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Read this reference when you need to:

Use methods (SetPointerValue, SetAnnotationValue, Refresh, Print, Export)
Update pointer values dynamically at runtime
Optimize performance for complex gauges
Place gauges inside other components (grids, dashboards, tabs)
Implement real-time data updates with timers or SignalR
Configure accessibility features (WCAG, keyboard navigation, screen readers)
Implement responsive design patterns
Handle server-side vs WebAssembly considerations
Test and troubleshoot complex gauge scenarios

📄 阅读： references/advanced-features.md

在以下场景中阅读此参考文档：

使用方法（SetPointerValue、SetAnnotationValue、Refresh、Print、Export）
在运行时动态更新指针数值
优化复杂仪表的性能
将仪表放置在其他组件内部（网格、仪表板、标签页）
使用计时器或SignalR实现实时数据更新
配置无障碍功能（WCAG、键盘导航、屏幕阅读器）
实现响应式设计模式
处理服务器端与WebAssembly的差异
测试和排查复杂仪表场景

Quick Start Example

快速入门示例

Here's a basic circular gauge with a needle pointer:

cshtml

@page "/circular-gauge"
@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Prerequisites:

Install

Syncfusion.Blazor.CircularGauge

and

Syncfusion.Blazor.Themes

NuGet packages

Register services:
```
builder.Services.AddSyncfusionBlazor();
```
Import theme CSS in
```
App.razor
```
or
```
index.html
```

以下是一个带有针型指针的基础圆形仪表：

cshtml

@page "/circular-gauge"
@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

前置条件：

安装

Syncfusion.Blazor.CircularGauge

和

Syncfusion.Blazor.Themes

NuGet包

注册服务：
```
builder.Services.AddSyncfusionBlazor();
```
在
```
App.razor
```
或
```
index.html
```
中导入主题CSS

Common Patterns

常见模式

Pattern 1: Speedometer Gauge

模式1：速度表仪表

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120" StartAngle="220" EndAngle="140">
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="12px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisLineStyle Width="10" Color="#E0E0E0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="40" Color="#30B32D"></CircularGaugeRange>
                <CircularGaugeRange Start="40" End="80" Color="#FFDD00"></CircularGaugeRange>
                <CircularGaugeRange Start="80" End="120" Color="#F03E3E"></CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Radius="60%" Color="#757575">
                    <CircularGaugePointerAnimation Enable="true" Duration="1500">
                    </CircularGaugePointerAnimation>
                    <CircularGaugeCap Radius="7">
                        <CircularGaugeCapBorder Width="3" Color="#757575">
                        </CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="18%" Color="#757575">
                    </CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="120" StartAngle="220" EndAngle="140">
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="12px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisLineStyle Width="10" Color="#E0E0E0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="40" Color="#30B32D"></CircularGaugeRange>
                <CircularGaugeRange Start="40" End="80" Color="#FFDD00"></CircularGaugeRange>
                <CircularGaugeRange Start="80" End="120" Color="#F03E3E"></CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Radius="60%" Color="#757575">
                    <CircularGaugePointerAnimation Enable="true" Duration="1500">
                    </CircularGaugePointerAnimation>
                    <CircularGaugeCap Radius="7">
                        <CircularGaugeCapBorder Width="3" Color="#757575">
                        </CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="18%" Color="#757575">
                    </CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Pattern 2: Temperature Indicator

模式2：温度指示器

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="-20" Maximum="50">
            <CircularGaugeAxisLineStyle Width="0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeAxisMajorTicks Height="0"></CircularGaugeAxisMajorTicks>
            <CircularGaugeAxisMinorTicks Height="0"></CircularGaugeAxisMinorTicks>
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="0px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="-20" End="0" Color="#6495ED" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="0" End="20" Color="#FFA500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="20" End="50" Color="#FF4500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="22" Radius="0%" Type="PointerType.Marker" 
                                      MarkerShape="GaugeShape.Triangle" MarkerHeight="20" MarkerWidth="20" 
                                      Color="#333">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeAnnotations>
                <CircularGaugeAnnotation Angle="0" Radius="0%" ZIndex="1">
                    <ContentTemplate>
                        <div style="font-size:24px;font-weight:bold;color:#333;">22°C</div>
                    </ContentTemplate>
                </CircularGaugeAnnotation>
            </CircularGaugeAnnotations>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="-20" Maximum="50">
            <CircularGaugeAxisLineStyle Width="0">
            </CircularGaugeAxisLineStyle>
            <CircularGaugeAxisMajorTicks Height="0"></CircularGaugeAxisMajorTicks>
            <CircularGaugeAxisMinorTicks Height="0"></CircularGaugeAxisMinorTicks>
            <CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisLabelFont Size="0px"></CircularGaugeAxisLabelFont>
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="-20" End="0" Color="#6495ED" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="0" End="20" Color="#FFA500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
                <CircularGaugeRange Start="20" End="50" Color="#FF4500" Radius="90%" StartWidth="30" EndWidth="30">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="22" Radius="0%" Type="PointerType.Marker" 
                                      MarkerShape="GaugeShape.Triangle" MarkerHeight="20" MarkerWidth="20" 
                                      Color="#333">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeAnnotations>
                <CircularGaugeAnnotation Angle="0" Radius="0%" ZIndex="1">
                    <ContentTemplate>
                        <div style="font-size:24px;font-weight:bold;color:#333;">22°C</div>
                    </ContentTemplate>
                </CircularGaugeAnnotation>
            </CircularGaugeAnnotations>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Pattern 3: Multi-Pointer Gauge

模式3：多指针仪表

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugePointers>
                <CircularGaugePointer Value="30" Color="#007DD1" PointerWidth="8" Radius="70%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="60" Color="#E5CE20" PointerWidth="8" Radius="80%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="90" Color="#F44336" PointerWidth="8" Radius="90%">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugePointers>
                <CircularGaugePointer Value="30" Color="#007DD1" PointerWidth="8" Radius="70%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="60" Color="#E5CE20" PointerWidth="8" Radius="80%">
                </CircularGaugePointer>
                <CircularGaugePointer Value="90" Color="#F44336" PointerWidth="8" Radius="90%">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Pattern 4: Range-Based Status Gauge with Legend

模式4：带图例的范围型状态仪表

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeLegendSettings Visible="true" Position="Syncfusion.Blazor.CircularGauge.LegendPosition.Bottom">
    </CircularGaugeLegendSettings>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="33" Color="#30B32D" LegendText="Good">
                </CircularGaugeRange>
                <CircularGaugeRange Start="33" End="66" Color="#FFDD00" LegendText="Warning">
                </CircularGaugeRange>
                <CircularGaugeRange Start="66" End="100" Color="#F03E3E" LegendText="Critical">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="75" Type="PointerType.RangeBar" Radius="60%" 
                                      PointerWidth="15" Color="#F03E3E">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge>
    <CircularGaugeLegendSettings Visible="true" Position="Syncfusion.Blazor.CircularGauge.LegendPosition.Bottom">
    </CircularGaugeLegendSettings>
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100">
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="33" Color="#30B32D" LegendText="Good">
                </CircularGaugeRange>
                <CircularGaugeRange Start="33" End="66" Color="#FFDD00" LegendText="Warning">
                </CircularGaugeRange>
                <CircularGaugeRange Start="66" End="100" Color="#F03E3E" LegendText="Critical">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="75" Type="PointerType.RangeBar" Radius="60%" 
                                      PointerWidth="15" Color="#F03E3E">
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Key Props and Configuration

核心属性与配置

API Reference (summary)

API参考（摘要）

Namespace / Import

命名空间/导入

```
@using Syncfusion.Blazor.CircularGauge
```

```
@using Syncfusion.Blazor.CircularGauge
```

Component:

SfCircularGauge

组件：

SfCircularGauge

Core Properties

核心属性

```
AllowImageExport
```
(bool)
```
AllowMargin
```
(bool)
```
AllowPdfExport
```
(bool)
```
AllowPrint
```
(bool)
```
AnimationDuration
```
(double) — animation duration in milliseconds
```
Background
```
(string)
```
CenterX
```
(string)
```
CenterY
```
(string)
```
Description
```
(string)
```
EnableGroupingSeparator
```
(bool)
```
EnablePointerDrag
```
(bool)
```
EnableRangeDrag
```
(bool)
```
Height
```
(string)
```
ID
```
(string)
```
MoveToCenter
```
(bool)
```
TabIndex
```
(int)
```
Theme
```
(enum)
```
Title
```
(string)
```
Width
```
(string)

```
AllowImageExport
```
(bool)
```
AllowMargin
```
(bool)
```
AllowPdfExport
```
(bool)
```
AllowPrint
```
(bool)
```
AnimationDuration
```
(double) — 动画时长（毫秒）
```
Background
```
(string)
```
CenterX
```
(string)
```
CenterY
```
(string)
```
Description
```
(string)
```
EnableGroupingSeparator
```
(bool)
```
EnablePointerDrag
```
(bool)
```
EnableRangeDrag
```
(bool)
```
Height
```
(string)
```
ID
```
(string)
```
MoveToCenter
```
(bool)
```
TabIndex
```
(int)
```
Theme
```
(enum)
```
Title
```
(string)
```
Width
```
(string)

Important Methods

重要方法

Task<string> ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true)

```
Task PrintAsync()
```
```
Task RefreshAsync()
```

Task SetAnnotationValueAsync(int axisIndex, int annotationIndex, string content)

Task SetPointerValueAsync(int axisIndex, int pointerIndex, double pointerValue)

void SetRangeValue(int axisIndex, int rangeIndex, double start, double end)

void UpdateChildProperties(string key, object keyValue)

Task<string> ExportAsync(ExportType type, string fileName, PdfPageOrientation? orientation = null, bool allowDownload = true)

```
Task PrintAsync()
```
```
Task RefreshAsync()
```

Task SetAnnotationValueAsync(int axisIndex, int annotationIndex, string content)

Task SetPointerValueAsync(int axisIndex, int pointerIndex, double pointerValue)

void SetRangeValue(int axisIndex, int rangeIndex, double start, double end)

void UpdateChildProperties(string key, object keyValue)

Events (common)

常用事件

```
AnimationCompleted
```
(AnimationCompleteEventArgs)
```
AnnotationRendering
```
(AnnotationRenderEventArgs)
```
AxisLabelRendering
```
(AxisLabelRenderEventArgs)
```
Loaded
```
/
```
OnLoad
```
(LoadedEventArgs)

OnGaugeMouseDown

OnGaugeMouseMove

OnGaugeMouseUp

OnGaugeMouseLeave

(MouseEventArgs)

```
OnDrag
```
,
```
OnDragStart
```
,
```
OnDragEnd
```
(PointerDragEventArgs)
```
OnPrint
```
(PrintEventArgs)
```
OnRadiusCalculate
```
(RadiusCalculateEventArgs)
```
Resizing
```
(ResizeEventArgs)
```
TooltipRendering
```
(TooltipRenderEventArgs)

```
AnimationCompleted
```
(AnimationCompleteEventArgs)
```
AnnotationRendering
```
(AnnotationRenderEventArgs)
```
AxisLabelRendering
```
(AxisLabelRenderEventArgs)
```
Loaded
```
/
```
OnLoad
```
(LoadedEventArgs)

OnGaugeMouseDown

OnGaugeMouseMove

OnGaugeMouseUp

OnGaugeMouseLeave

(MouseEventArgs)

```
OnDrag
```
,
```
OnDragStart
```
,
```
OnDragEnd
```
(PointerDragEventArgs)
```
OnPrint
```
(PrintEventArgs)
```
OnRadiusCalculate
```
(RadiusCalculateEventArgs)
```
Resizing
```
(ResizeEventArgs)
```
TooltipRendering
```
(TooltipRenderEventArgs)

Child Tags and Key Properties

子标签与核心属性

CircularGaugeAnnotation

—

Content

Angle

Radius

AutoAngle

```
CircularGaugeAxes
```
— collection of
```
CircularGaugeAxis
```

CircularGaugeAxis

—

Background

Direction

EndAngle

StartAngle

Maximum

Minimum

Radius

```
CircularGaugeBorder
```
—
```
Color
```
,
```
Width
```

CircularGaugeLegendSettings

—

Visible

Position

Shape

ToggleVisibility

```
CircularGaugeMargin
```
—
```
Top
```
,
```
Bottom
```
,
```
Left
```
,
```
Right
```

CircularGaugePointer

—

Type

Value

Color

MarkerShape

Position

PointerWidth

Radius

CircularGaugeRange

—

Start

End

Color

StartWidth

EndWidth

Radius

CircularGaugeTooltipSettings

—

Enable

Fill

Format

ShowAtMousePosition

CircularGaugeAnnotation

—

Content

Angle

Radius

AutoAngle

```
CircularGaugeAxes
```
—
```
CircularGaugeAxis
```
集合

CircularGaugeAxis

—

Background

Direction

EndAngle

StartAngle

Maximum

Minimum

Radius

```
CircularGaugeBorder
```
—
```
Color
```
,
```
Width
```

CircularGaugeLegendSettings

—

Visible

Position

Shape

ToggleVisibility

```
CircularGaugeMargin
```
—
```
Top
```
,
```
Bottom
```
,
```
Left
```
,
```
Right
```

CircularGaugePointer

—

Type

Value

Color

MarkerShape

Position

PointerWidth

Radius

CircularGaugeRange

—

Start

End

Color

StartWidth

EndWidth

Radius

CircularGaugeTooltipSettings

—

Enable

Fill

Format

ShowAtMousePosition

Styling CSS classes

样式CSS类

```
e-circulargauge
```
```
e-gauge-axis
```
```
e-gauge-pointer
```
```
e-gauge-range
```
```
e-gauge-annotation
```

```
e-circulargauge
```
```
e-gauge-axis
```
```
e-gauge-pointer
```
```
e-gauge-range
```
```
e-gauge-annotation
```

Typical Usage Snippet

典型用法代码片段

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Title="Basic Circular Gauge" Height="400px" Width="400px">
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100" StartAngle="200" EndAngle="160">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1" PointerWidth="8">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="50" Color="#3A5998" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
                <CircularGaugeRange Start="50" End="100" Color="#33BCDA" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Title="Basic Circular Gauge" Height="400px" Width="400px">
    <CircularGaugeAxes>
        <CircularGaugeAxis Minimum="0" Maximum="100" StartAngle="200" EndAngle="160">
            <CircularGaugePointers>
                <CircularGaugePointer Value="65" Color="#007DD1" PointerWidth="8">
                </CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="50" Color="#3A5998" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
                <CircularGaugeRange Start="50" End="100" Color="#33BCDA" StartWidth="10" EndWidth="10">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

Common Use Cases

常见使用场景

Dashboard KPI Displays: Show business metrics like sales performance, customer satisfaction scores, or completion percentages
Vehicle Instruments: Create speedometers, tachometers, fuel gauges, or battery indicators
Environmental Monitoring: Display temperature, humidity, pressure, or air quality readings
Industrial Controls: Show machine status, pressure levels, RPM, or load percentages
Health & Fitness: Visualize heart rate, step count, calorie burn, or workout intensity
Resource Utilization: Display CPU usage, memory consumption, disk space, or network bandwidth
Progress Tracking: Show project completion, task progress, or milestone achievement
Quality Metrics: Display defect rates, test pass rates, or compliance scores
Financial Indicators: Show portfolio performance, risk levels, or budget utilization
Interactive Settings: Allow users to adjust thermostat settings, volume levels, or brightness controls

仪表板KPI展示：显示业务指标，如销售业绩、客户满意度得分或完成百分比
车辆仪表：创建速度表、转速表、燃油表或电池指示器
环境监控：展示温度、湿度、压力或空气质量读数
工业控制：显示机器状态、压力水平、转速或负载百分比
健康与健身：可视化心率、步数、卡路里消耗或锻炼强度
资源利用率：显示CPU使用率、内存消耗、磁盘空间或网络带宽
进度跟踪：展示项目完成情况、任务进度或里程碑达成情况
质量指标：显示缺陷率、测试通过率或合规得分
财务指标：展示投资组合表现、风险水平或预算使用情况
交互式设置：允许用户调整恒温器设置、音量或亮度控制

syncfusion-blazor-circular-gauge

Original

Translation

Implementing Syncfusion Blazor CircularGauge

实现Syncfusion Blazor CircularGauge

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Axes Configuration

轴配置

Pointers

指针

Ranges

范围

Annotations

注释

Legend

图例

Appearance and Styling

外观与样式

User Interaction

用户交互

Globalization

全球化

Advanced Features

高级功能

Quick Start Example

快速入门示例

Common Patterns

常见模式

Pattern 1: Speedometer Gauge

模式1：速度表仪表

Pattern 2: Temperature Indicator

模式2：温度指示器

Pattern 3: Multi-Pointer Gauge

模式3：多指针仪表

Pattern 4: Range-Based Status Gauge with Legend

模式4：带图例的范围型状态仪表

Key Props and Configuration

核心属性与配置

API Reference (summary)

API参考（摘要）

Namespace / Import

命名空间/导入

Component: SfCircularGauge

组件：SfCircularGauge

Core Properties

核心属性

Important Methods

重要方法

Events (common)

常用事件

Child Tags and Key Properties

子标签与核心属性

Styling CSS classes

样式CSS类

Typical Usage Snippet

典型用法代码片段

Common Use Cases

常见使用场景

Related Skills

相关技能

Component:
`SfCircularGauge`

组件：
`SfCircularGauge`