syncfusion-blazor-circular-gauge

Name: syncfusion-blazor-circular-gauge
Author: syncfusion

github.com/syncfusion设计与 UI4339 次安装1 周前更新

代码仓库

关于 syncfusion-blazor-circular-gauge

面向 Blazor 开发者的 Syncfusion CircularGauge 实现指南，用于以圆弧仪表呈现定量数据。内容涵盖轴、指针、范围、注释及交互设置。

主要功能

01可配置轴与角度
02指针、刻度和颜色范围
03文本、图像及 HTML 注释
04提示框与指针拖动
05图例、动画与导出
06本地化、RTL 与无障碍

适用场景

01构建 KPI 仪表盘
02呈现温度或压力读数
03制作速度表或电量指示器
04显示工业设备状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-circular-gauge

安装后在 Claude Code 中输入/syncfusion-blazor-circular-gauge确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

advanced-features.md

annotations.md

api-reference.md

appearance.md

axes-configuration.md

getting-started.md

globalization.md

legend.md

pointers.md

ranges.md

user-interaction.md

详细介绍

实现 Syncfusion Blazor CircularGauge

NuGet： Syncfusion.Blazor.CircularGauge + Syncfusion.Blazor.Themes
命名空间： Syncfusion.Blazor.CircularGauge

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

何时使用此技能

在以下情况下使用此技能：

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

组件概览

Syncfusion Blazor CircularGauge（SfCircularGauge）是一种数据可视化组件，可通过圆弧显示定量信息。它支持多种指针类型、颜色编码范围、自定义注释、图例和丰富的交互功能。

主要功能：

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

文档和导航指南

入门

📄 阅读： references/getting-started.md

在以下情况下阅读此参考文档：

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

轴配置

📄 阅读： references/axes-configuration.md

在以下情况下阅读此参考文档：

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

指针

📄 阅读： references/pointers.md

在以下情况下阅读此参考文档：

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

范围

📄 阅读： references/ranges.md

在以下情况下阅读此参考文档：

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

注释

📄 阅读： references/annotations.md

需要执行以下操作时，请阅读此参考：

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

图例

📄 阅读： references/legend.md

需要执行以下操作时，请阅读此参考：

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

外观和样式

📄 阅读： references/appearance.md

需要执行以下操作时，请阅读此参考：

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

用户交互

📄 阅读： references/user-interaction.md

需要执行以下操作时，请阅读此参考：

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

国际化

📄 阅读： references/globalization.md

需要执行以下操作时，请阅读此参考：

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

高级功能

📄 阅读： references/advanced-features.md

需要执行以下操作时，请阅读此参考：

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

快速入门示例

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

@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

常见模式

模式 1：速度表

@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>

模式 2：温度指示器

@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>

模式 3：多指针仪表

@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>

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

@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>

关键属性和配置

API 参考（摘要）

命名空间 / 导入

@using Syncfusion.Blazor.CircularGauge

组件：`SfCircularGauge`

核心属性

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)

重要方法

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)

常见事件

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)

子标签和关键属性

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

CSS 样式类

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

典型用法示例

@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>

常见用例

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

syncfusion-blazor-circular-gauge

关于 syncfusion-blazor-circular-gauge

主要功能

适用场景

安装

包含的文件

详细介绍

实现 Syncfusion Blazor CircularGauge

何时使用此技能

组件概览

文档和导航指南

入门

轴配置

指针

范围

注释

图例

外观和样式

用户交互

国际化

高级功能

快速入门示例

常见模式

模式 1：速度表

模式 2：温度指示器

模式 3：多指针仪表

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

关键属性和配置

API 参考（摘要）

命名空间 / 导入

组件：`SfCircularGauge`

核心属性

重要方法

常见事件

子标签和关键属性

CSS 样式类

典型用法示例

常见用例

相关技能

评论

syncfusion-blazor-circular-gauge

关于 syncfusion-blazor-circular-gauge

主要功能

适用场景

安装

包含的文件

详细介绍

实现 Syncfusion Blazor CircularGauge

何时使用此技能

组件概览

文档和导航指南

入门

轴配置

指针

范围

注释

图例

外观和样式

用户交互

国际化

高级功能

快速入门示例

常见模式

模式 1：速度表

模式 2：温度指示器

模式 3：多指针仪表

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

关键属性和配置

API 参考（摘要）

命名空间 / 导入

组件：SfCircularGauge

核心属性

重要方法

常见事件

子标签和关键属性

CSS 样式类

典型用法示例

常见用例

相关技能

评论

组件：`SfCircularGauge`