syncfusion-blazor-linear-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Linear Gauges

实现Syncfusion Blazor线性仪表盘

When to Use This Skill

适用场景

Use this skill when the user needs to:

Visualize numeric values on a linear scale (horizontal or vertical)
Display measurement data like temperature, pressure, speed, or progress
Create dashboard components with gauge visualizations
Implement KPI displays with ranges and indicators
Show real-time data with animated pointers
Build interactive gauges where users can drag pointers to change values
Create multi-scale visualizations with multiple axes and pointers

The Syncfusion Blazor Linear Gauge is ideal for applications requiring precise numeric visualization with customizable scales, pointers, and ranges.

当用户需要以下功能时，可使用本技能：

在线性刻度（水平或垂直）上可视化数值
显示测量数据，如温度、压力、速度或进度
创建带仪表盘可视化的仪表板组件
实现带范围和指示器的KPI展示
通过动画指针展示实时数据
构建交互式仪表盘，允许用户拖动指针更改数值
创建多刻度可视化，支持多轴和多指针

Syncfusion Blazor Linear Gauge非常适合需要可定制刻度、指针和范围的精确数值可视化应用。

Component Overview

组件概述

The Blazor Linear Gauge (SfLinearGauge) is a data visualization component that displays numeric values on a linear scale with features including:

Multiple axes with customizable ranges and styling
Various pointer types (marker shapes, bar pointers, text, images)
Color-coded ranges for value categorization
Annotations for labels and custom content
Interactive features including drag-to-change pointer values
Events and methods for dynamic updates
Accessibility support with WCAG compliance
Internationalization for global applications

**Blazor Linear Gauge（SfLinearGauge）**是一款数据可视化组件，可在线性刻度上显示数值，具备以下特性：

多轴支持，可定制范围和样式
多种指针类型（标记形状、条形指针、文本、图片）
颜色编码范围，用于数值分类
注释功能，支持标签和自定义内容
交互式特性，包括拖动指针更改数值
事件与方法，支持动态更新
无障碍支持，符合WCAG标准
国际化，适配全球应用

Documentation and Navigation Guide

文档与导航指南

This skill provides comprehensive, self-contained reference files for each aspect of the Linear Gauge component. Read the appropriate reference based on your current need.

本技能为Linear Gauge组件的各个方面提供了全面、独立的参考文档。根据当前需求阅读对应的参考内容。

Getting Started

快速入门

📄 Read: references/getting-started.md

When to read: First-time setup, new project initialization, installation questions

What's covered:

Installation via Visual Studio, VS Code, and .NET CLI
NuGet package installation (Syncfusion.Blazor.LinearGauge, Syncfusion.Blazor.Themes)
Namespace imports and service registration
Stylesheet and script references
Basic LinearGauge component implementation
Adding pointers and setting values
Adding titles and ranges
Running your first gauge application

📄 阅读： references/getting-started.md

阅读时机： 首次设置、新项目初始化、安装相关问题

涵盖内容：

通过Visual Studio、VS Code和.NET CLI进行安装
NuGet包安装（Syncfusion.Blazor.LinearGauge、Syncfusion.Blazor.Themes）
命名空间导入与服务注册
样式表和脚本引用
基础LinearGauge组件实现
添加指针并设置数值
添加标题和范围
运行首个仪表盘应用

Core Components

核心组件

Axes Configuration

轴配置

📄 Read: references/axes-configuration.md

When to read: Setting up gauge scales, customizing axis appearance, working with multiple axes

What's covered:

Setting Minimum and Maximum values for the scale
Line customization (height, width, color, offset)
Major ticks configuration (interval, height, color, width, position, offset)
Minor ticks configuration (interval, height, color, width, position, offset)
Label customization (format, font, position, offset)
Multiple axes on single gauge
Inverse axis direction
Opposed position for axes
Complete code examples for all configurations

📄 阅读： references/axes-configuration.md

阅读时机： 设置仪表盘刻度、自定义轴外观、使用多轴场景

涵盖内容：

设置刻度的最小值和最大值
线条定制（高度、宽度、颜色、偏移量）
主刻度配置（间隔、高度、颜色、宽度、位置、偏移量）
次刻度配置（间隔、高度、颜色、宽度、位置、偏移量）
标签定制（格式、字体、位置、偏移量）
单个仪表盘上的多轴设置
反向轴方向
轴的对立位置设置
所有配置的完整代码示例

Pointers

指针

📄 Read: references/pointers.md

When to read: Adding value indicators, customizing pointer appearance, implementing multiple pointers

What's covered:

Setting pointer values
Marker pointers with various shapes (Circle, Rectangle, Triangle, Diamond, InvertedTriangle)
Bar pointers with customization options
Image pointers with custom images
Text pointers with custom styling
Pointer positioning and placement
Animation configuration for smooth transitions
Multiple pointers on single axis
Drag and drop interaction for value changes
Complete examples for each pointer type

📄 阅读： references/pointers.md

阅读时机： 添加数值指示器、自定义指针外观、实现多指针场景

涵盖内容：

设置指针数值
多种形状的标记指针（圆形、矩形、三角形、菱形、倒三角形）
可定制的条形指针
自定义图片的图片指针
带自定义样式的文本指针
指针定位与布局
平滑过渡的动画配置
单轴上的多指针设置
拖动交互更改数值
每种指针类型的完整示例

Ranges

范围

📄 Read: references/ranges.md

When to read: Adding color-coded value regions, implementing performance zones, creating visual thresholds

What's covered:

Setting range start and end values
Range color customization
Range positioning (inside, outside, cross)
Range offset configuration
Start and end width for gradient effects
Multiple ranges on single axis
Practical use cases (temperature zones, performance indicators, status ranges)
Complete code examples with visual results

📄 阅读： references/ranges.md

阅读时机： 添加颜色编码的数值区域、实现性能分区、创建可视化阈值

涵盖内容：

设置范围的起始和结束数值
范围颜色定制
范围定位（内部、外部、交叉）
范围偏移量配置
渐变效果的起始和结束宽度
单轴上的多范围设置
实际用例（温度区间、性能指标、状态范围）
带可视化效果的完整代码示例

Appearance and Styling

外观与样式

Annotations

注释

📄 Read: references/annotations.md

When to read: Adding labels, custom content, units, or dynamic text to the gauge

What's covered:

Adding text annotations
HTML content in annotations
Positioning annotations with x, y coordinates
Z-index for layering multiple annotations
Font styling for text annotations
Horizontal and vertical alignment
Multiple annotations on gauge
Dynamic content updates
Practical examples (unit labels, value displays, warnings)

📄 阅读： references/annotations.md

阅读时机： 为仪表盘添加标签、自定义内容、单位或动态文本

涵盖内容：

添加文本注释
注释中的HTML内容
使用x、y坐标定位注释
多注释分层的Z-index设置
文本注释的字体样式
水平和垂直对齐
仪表盘上的多注释设置
动态内容更新
实际示例（单位标签、数值显示、警告提示）

Appearance and Styling

外观与样式

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

When to read: Customizing gauge look and feel, theming, responsive design, print styling

What's covered:

Container customization (width, height, background, border)
Orientation (horizontal vs vertical)
Margin and container adjustments
Title customization (text, font, position)
Theme selection (Bootstrap, Material, Fabric, Fluent, Tailwind, etc.)
Custom CSS styling
Responsive design considerations
Color schemes and palettes
Print-friendly styling
Complete styling examples

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

阅读时机： 自定义仪表盘外观、主题设置、响应式设计、打印样式

涵盖内容：

容器定制（宽度、高度、背景、边框）
方向设置（水平vs垂直）
边距和容器调整
标题定制（文本、字体、位置）
主题选择（Bootstrap、Material、Fabric、Fluent、Tailwind等）
自定义CSS样式
响应式设计注意事项
配色方案和调色板
打印友好样式
完整样式示例

Advanced Features

高级特性

Methods and Events

方法与事件

📄 Read: references/methods-and-events.md

When to read: Implementing dynamic updates, handling user interactions, programmatic control

What's covered:

setPointerValue() method for dynamic pointer updates
setAnnotationValue() method for annotation updates
print() method for printing gauges
refresh() method for re-rendering
Load and Loaded events
AnimationComplete event
AxisLabelRendering event for label customization
AnnotationRendering event
ValueChange event for user interactions
TooltipRendering event
ResizeCompleted event
Complete event handler examples with practical scenarios

📄 阅读： references/methods-and-events.md

阅读时机： 实现动态更新、处理用户交互、程序化控制

涵盖内容：

setPointerValue()方法，用于动态更新指针数值
setAnnotationValue()方法，用于更新注释内容
print()方法，用于打印仪表盘
refresh()方法，用于重新渲染
Load和Loaded事件
AnimationComplete事件
AxisLabelRendering事件，用于标签定制
AnnotationRendering事件
ValueChange事件，用于用户交互
TooltipRendering事件
ResizeCompleted事件
带实际场景的完整事件处理示例

User Interaction

用户交互

📄 Read: references/user-interaction.md

When to read: Enabling tooltips, drag interactions, mouse/touch events, value changes

What's covered:

Tooltip configuration and customization
Tooltip templates with custom HTML
Pointer drag to change values
Enabling/disabling pointer interaction
Mouse and touch event handling
Value change tracking and callbacks
Animation on user interaction
Complete interactive examples

📄 阅读： references/user-interaction.md

阅读时机： 启用工具提示、拖动交互、鼠标/触摸事件、数值更改

涵盖内容：

工具提示配置与定制
带自定义HTML的工具提示模板
拖动指针更改数值
启用/禁用指针交互
鼠标和触摸事件处理
数值更改跟踪与回调
用户交互时的动画
完整交互示例

Accessibility and Internationalization

无障碍与国际化

📄 Read: references/accessibility-and-internationalization.md

When to read: Implementing WCAG compliance, keyboard navigation, screen readers, global applications

What's covered:

Accessibility overview (WCAG 2.1 Level AA compliance)
Keyboard navigation support
Screen reader compatibility
ARIA attributes and labels
High contrast mode support
Focus indicators
Internationalization (i18n) setup
Number formatting for different locales
RTL (Right-to-Left) support
Complete accessibility implementation examples

📄 阅读： references/accessibility-and-internationalization.md

阅读时机： 实现WCAG合规、键盘导航、屏幕阅读器适配、全球应用

涵盖内容：

无障碍概述（符合WCAG 2.1 Level AA标准）
键盘导航支持
屏幕阅读器兼容性
ARIA属性和标签
高对比度模式支持
焦点指示器
国际化（i18n）设置
不同区域的数值格式化
RTL（从右到左）支持
完整无障碍实现示例

Quick Start Example

快速入门示例

Here's a minimal example to get started with Blazor Linear Gauge:

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Title="Temperature Monitor">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°C"></LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="65" Color="#007bff">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="40" Color="#4CAF50"></LinearGaugeRange>
                <LinearGaugeRange Start="40" End="80" Color="#FFC107"></LinearGaugeRange>
                <LinearGaugeRange Start="80" End="120" Color="#F44336"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Result: A vertical linear gauge showing temperature from 0°C to 120°C with three color-coded ranges (green, yellow, red) and a pointer at 65°C.

以下是Blazor Linear Gauge的最简入门示例：

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Title="Temperature Monitor">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°C"></LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="65" Color="#007bff">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="40" Color="#4CAF50"></LinearGaugeRange>
                <LinearGaugeRange Start="40" End="80" Color="#FFC107"></LinearGaugeRange>
                <LinearGaugeRange Start="80" End="120" Color="#F44336"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

效果： 一个垂直线性仪表盘，显示0°C到120°C的温度，包含三个颜色编码范围（绿色、黄色、红色），指针指向65°C。

Common Patterns

常见模式

Pattern 1: Simple Progress Indicator

模式1：简单进度指示器

Use case: Show completion percentage or progress status

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Syncfusion.Blazor.LinearGauge.Orientation.Horizontal" Width="400px" Height="80px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="75" Type="Syncfusion.Blazor.LinearGauge.Point.Bar" 
                                    Color="#28a745" Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

用例： 显示完成百分比或进度状态

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Syncfusion.Blazor.LinearGauge.Orientation.Horizontal" Width="400px" Height="80px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="75" Type="Syncfusion.Blazor.LinearGauge.Point.Bar" 
                                    Color="#28a745" Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Pattern 2: Multi-Scale Dashboard Gauge

模式2：多刻度仪表板仪表盘

Use case: Display multiple metrics on one gauge

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="60" Color="#007bff"></LinearGaugePointer>
                <LinearGaugePointer PointerValue="80" Color="#dc3545"></LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

用例： 在一个仪表盘上显示多个指标

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="60" Color="#007bff"></LinearGaugePointer>
                <LinearGaugePointer PointerValue="80" Color="#dc3545"></LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Pattern 3: Interactive Value Adjuster

模式3：交互式数值调节器

Use case: Allow users to change values by dragging the pointer

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeEvents ValueChange="@OnValueChange"></LinearGaugeEvents>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@currentValue" 
                                    EnableDrag="true">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double currentValue = 50;
    
    private void OnValueChange(ValueChangeEventArgs args)
    {
        currentValue = args.Value;
    }
}

用例： 允许用户通过拖动指针更改数值

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeEvents ValueChange="@OnValueChange"></LinearGaugeEvents>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="0" Maximum="100">
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@currentValue" 
                                    EnableDrag="true">
                </LinearGaugePointer>
            </LinearGaugePointers>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double currentValue = 50;
    
    private void OnValueChange(ValueChangeEventArgs args)
    {
        currentValue = args.Value;
    }
}

Pattern 4: Styled Thermometer

模式4：样式化温度计

Use case: Temperature display with visual zones

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Width="150px" Height="400px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="-20" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°">
            </LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@temperature" 
                                    Type="Syncfusion.Blazor.LinearGauge.Point.Bar"
                                    Color="#ff6b6b"
                                    Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="-20" End="0" Color="#0099ff"></LinearGaugeRange>
                <LinearGaugeRange Start="0" End="25" Color="#00e676"></LinearGaugeRange>
                <LinearGaugeRange Start="25" End="120" Color="#ff5252"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double temperature = 35;
}

用例： 带可视化区间的温度显示

razor

@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Width="150px" Height="400px">
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="-20" Maximum="120">
            <LinearGaugeAxisLabelStyle Format="{value}°">
            </LinearGaugeAxisLabelStyle>
            <LinearGaugePointers>
                <LinearGaugePointer PointerValue="@temperature" 
                                    Type="Syncfusion.Blazor.LinearGauge.Point.Bar"
                                    Color="#ff6b6b"
                                    Width="20">
                </LinearGaugePointer>
            </LinearGaugePointers>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="-20" End="0" Color="#0099ff"></LinearGaugeRange>
                <LinearGaugeRange Start="0" End="25" Color="#00e676"></LinearGaugeRange>
                <LinearGaugeRange Start="25" End="120" Color="#ff5252"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

@code {
    private double temperature = 35;
}

API Reference

API参考

The official Linear Gauge API is centered on the

SfLinearGauge

component and comprehensive child components for configuring axes, pointers, ranges, annotations, gradients, tooltips, and event handlers. This reference is based on the official Syncfusion Blazor Linear Gauge API documentation.

官方Linear Gauge API以

SfLinearGauge

组件为核心，包含用于配置轴、指针、范围、注释、渐变、工具提示和事件处理程序的全面子组件。本参考基于官方Syncfusion Blazor Linear Gauge API文档。

SfLinearGauge

Primary container component for the gauge. This is the root component that hosts all gauge elements.

Component Properties:

Sizing & Layout:

```
Width
```
(string): Sets the width of the linear gauge container
```
Height
```
(string): Sets the height of the linear gauge container
```
Orientation
```
(Orientation): Sets the gauge orientation (
```
Horizontal
```
or
```
Vertical
```
)
```
Description
```
(string): Sets the description for accessibility purposes

Appearance:

```
Title
```
(string): Sets the title text displayed on the gauge
```
TitleStyle
```
(LinearGaugeTitleStyle): Configures title font, position, and styling
```
Background
```
(string): Sets the background color of the gauge container
```
Theme
```
(Theme): Applies predefined themes (Bootstrap, Material, Fabric, Fluent, Tailwind, etc.)
```
Container
```
(LinearGaugeContainer): Configures the container appearance and border
```
Margin
```
(LinearGaugeMargin): Sets left, right, top, and bottom margins

Behavior:

```
AnimationDuration
```
(double): Sets the animation duration (in milliseconds) for initial rendering and pointer updates
```
Format
```
(string): Sets the number format for axis labels
```
EnableGroupingSeparator
```
(bool): Enables thousand separators in numbers
```
ID
```
(string): Sets the unique identifier for the gauge component
```
TabIndex
```
(int): Sets the tab order for keyboard navigation

Export & Print:

```
AllowPrint
```
(bool): Enables print functionality
```
AllowPdfExport
```
(bool): Enables PDF export functionality
```
AllowImageExport
```
(bool): Enables image export (PNG, SVG) functionality
```
AllowMargin
```
(bool): Includes margins when printing or exporting

Styling:

```
RangePalettes
```
(string[]): Defines automatic color palette for ranges

Methods:

csharp

// Update pointer value programmatically (async version)
public async Task SetPointerValueAsync(int axisIndex, int pointerIndex, double value)

// Update annotation content dynamically (async version)
public async Task SetAnnotationValueAsync(int annotationIndex, string content)

// Refresh the entire gauge (async version)
public async Task RefreshAsync()

// Print the gauge (requires AllowPrint="true")
public async Task PrintAsync()

// Export gauge to file (requires corresponding AllowXyzExport="true")
public async Task ExportAsync(ExportType type, string fileName, 
    PdfPageOrientation? orientation = null, bool allowDownload = true)

Export Types:

```
ExportType.PNG
```
```
ExportType.SVG
```
```
ExportType.PDF
```

仪表盘的主容器组件。这是承载所有仪表盘元素的根组件。

组件属性：

尺寸与布局：

```
Width
```
（字符串）：设置线性仪表盘容器的宽度
```
Height
```
（字符串）：设置线性仪表盘容器的高度
```
Orientation
```
（Orientation）：设置仪表盘方向（
```
Horizontal
```
或
```
Vertical
```
）
```
Description
```
（字符串）：设置无障碍用途的描述

外观：

```
Title
```
（字符串）：设置仪表盘上显示的标题文本
```
TitleStyle
```
（LinearGaugeTitleStyle）：配置标题字体、位置和样式
```
Background
```
（字符串）：设置仪表盘容器的背景颜色
```
Theme
```
（Theme）：应用预定义主题（Bootstrap、Material、Fabric、Fluent、Tailwind等）
```
Container
```
（LinearGaugeContainer）：配置容器外观和边框
```
Margin
```
（LinearGaugeMargin）：设置左、右、上、下边距

行为：

```
AnimationDuration
```
（双精度）：设置初始渲染和指针更新的动画时长（毫秒）
```
Format
```
（字符串）：设置轴标签的数值格式
```
EnableGroupingSeparator
```
（布尔值）：启用数值中的千位分隔符
```
ID
```
（字符串）：设置仪表盘组件的唯一标识符
```
TabIndex
```
（整数）：设置键盘导航的Tab顺序

导出与打印：

```
AllowPrint
```
（布尔值）：启用打印功能
```
AllowPdfExport
```
（布尔值）：启用PDF导出功能
```
AllowImageExport
```
（布尔值）：启用图片导出（PNG、SVG）功能
```
AllowMargin
```
（布尔值）：打印或导出时包含边距

样式：

```
RangePalettes
```
（字符串数组）：定义范围的自动调色板

方法：

csharp

// 程序化更新指针数值（异步版本）
public async Task SetPointerValueAsync(int axisIndex, int pointerIndex, double value)

// 动态更新注释内容（异步版本）
public async Task SetAnnotationValueAsync(int annotationIndex, string content)

// 刷新整个仪表盘（异步版本）
public async Task RefreshAsync()

// 打印仪表盘（需设置AllowPrint="true"）
public async Task PrintAsync()

// 导出仪表盘到文件（需对应设置AllowXyzExport="true"）
public async Task ExportAsync(ExportType type, string fileName, 
    PdfPageOrientation? orientation = null, bool allowDownload = true)

导出类型：

```
ExportType.PNG
```
```
ExportType.SVG
```
```
ExportType.PDF
```

LinearGaugeAxes & LinearGaugeAxis

Container (

LinearGaugeAxes

) for one or more axes. Each

LinearGaugeAxis

defines a scale with range, ticks, labels, pointers, and ranges.

LinearGaugeAxis Properties:

Scale Configuration:

```
Minimum
```
(double): Sets the minimum value of the axis scale
```
Maximum
```
(double): Sets the maximum value of the axis scale
```
IsInversed
```
(bool): Reverses the direction of the axis (high to low instead of low to high)
```
OpposedPosition
```
(bool): Places the axis on the opposite side (left/right for vertical, top/bottom for horizontal)
```
ShowLastLabel
```
(bool): Shows or hides the last label on the axis

Child Components:

```
LinearGaugeLine
```
- Configures the axis line appearance
```
LinearGaugeMajorTicks
```
- Major tick marks on the axis
```
LinearGaugeMinorTicks
```
- Minor tick marks on the axis
```
LinearGaugeAxisLabelStyle
```
- Label styling and positioning
```
LinearGaugeAxisLabelFont
```
- Font properties for axis labels
```
LinearGaugeContainer
```
- Container for the axis
```
LinearGaugePointers
```
- Pointer collection for this axis
```
LinearGaugeRanges
```
- Range collection for this axis
```
LinearGaugeLinearGradient
```
- Gradient fill for axis elements
```
LinearGaugeRadialGradient
```
- Radial gradient for axis elements

一个或多个轴的容器（

LinearGaugeAxes

）。每个

LinearGaugeAxis

定义一个包含范围、刻度、标签、指针和区间的刻度。

LinearGaugeAxis属性：

刻度配置：

```
Minimum
```
（双精度）：设置轴刻度的最小值
```
Maximum
```
（双精度）：设置轴刻度的最大值
```
IsInversed
```
（布尔值）：反转轴方向（从高到低而非从低到高）
```
OpposedPosition
```
（布尔值）：将轴放置在对立侧（垂直轴的左/右，水平轴的上/下）
```
ShowLastLabel
```
（布尔值）：显示或隐藏轴上的最后一个标签

子组件：

```
LinearGaugeLine
```
- 配置轴线外观
```
LinearGaugeMajorTicks
```
- 轴上的主刻度标记
```
LinearGaugeMinorTicks
```
- 轴上的次刻度标记
```
LinearGaugeAxisLabelStyle
```
- 标签样式与定位
```
LinearGaugeAxisLabelFont
```
- 轴标签的字体属性
```
LinearGaugeContainer
```
- 轴的容器
```
LinearGaugePointers
```
- 此轴的指针集合
```
LinearGaugeRanges
```
- 此轴的范围集合
```
LinearGaugeLinearGradient
```
- 轴元素的线性渐变填充
```
LinearGaugeRadialGradient
```
- 轴元素的径向渐变

Axis Line & Ticks

轴线与刻度

LinearGaugeLine - Defines the axis line appearance

```
Height
```
(double): Height of the axis line
```
Width
```
(double): Width of the axis line
```
Color
```
(string): Color of the axis line
```
Offset
```
(double): Offset from axis

LinearGaugeMajorTicks - Major tick configuration

```
Interval
```
(double): Interval between major ticks
```
Height
```
(double): Height of major tick marks
```
Width
```
(double): Width of major tick marks
```
Color
```
(string): Color of major ticks
```
Position
```
(Position): Position relative to axis (
```
Inside
```
,
```
Outside
```
,
```
Cross
```
)
```
Offset
```
(double): Offset from axis line

LinearGaugeMinorTicks - Minor tick configuration

```
Interval
```
(double): Interval between minor ticks
```
Height
```
(double): Height of minor tick marks
```
Width
```
(double): Width of minor tick marks
```
Color
```
(string): Color of minor ticks
```
Position
```
(Position): Position relative to axis
```
Offset
```
(double): Offset from axis line

LinearGaugeLine - 定义轴线外观

```
Height
```
（双精度）：轴线高度
```
Width
```
（双精度）：轴线宽度
```
Color
```
（字符串）：轴线颜色
```
Offset
```
（双精度）：相对于轴的偏移量

LinearGaugeMajorTicks - 主刻度配置

```
Interval
```
（双精度）：主刻度之间的间隔
```
Height
```
（双精度）：主刻度标记的高度
```
Width
```
（双精度）：主刻度标记的宽度
```
Color
```
（字符串）：主刻度颜色
```
Position
```
（Position）：相对于轴的位置（
```
Inside
```
、
```
Outside
```
、
```
Cross
```
）
```
Offset
```
（双精度）：相对于轴线的偏移量

LinearGaugeMinorTicks - 次刻度配置

```
Interval
```
（双精度）：次刻度之间的间隔
```
Height
```
（双精度）：次刻度标记的高度
```
Width
```
（双精度）：次刻度标记的宽度
```
Color
```
（字符串）：次刻度颜色
```
Position
```
（Position）：相对于轴的位置
```
Offset
```
（双精度）：相对于轴线的偏移量

Axis Labels

轴标签

LinearGaugeAxisLabelStyle - Label styling and positioning

```
Format
```
(string): Format string for label values (e.g., "{value}°C")
```
Position
```
(Position): Label position (
```
Inside
```
,
```
Outside
```
,
```
Cross
```
)
```
Offset
```
(double): Distance from axis line
```
FontFamily
```
(string): Font family for labels
```
Color
```
(string): Color of label text
```
Opacity
```
(double): Opacity of labels (0 to 1)

LinearGaugeAxisLabelFont - Font properties for axis labels

```
FontFamily
```
(string): Font family name
```
FontSize
```
(string): Font size in pixels or relative units
```
FontStyle
```
(string): Font style (normal, italic, oblique)
```
FontWeight
```
(string): Font weight (normal, bold, lighter, bolder, 100-900)

LinearGaugeAxisLabelStyle - 标签样式与定位

```
Format
```
（字符串）：标签数值的格式字符串（例如"{value}°C"）
```
Position
```
（Position）：标签位置（
```
Inside
```
、
```
Outside
```
、
```
Cross
```
）
```
Offset
```
（双精度）：与轴线的距离
```
FontFamily
```
（字符串）：标签的字体族
```
Color
```
（字符串）：标签文本颜色
```
Opacity
```
（双精度）：标签透明度（0到1）

LinearGaugeAxisLabelFont - 轴标签的字体属性

```
FontFamily
```
（字符串）：字体族名称
```
FontSize
```
（字符串）：字体大小（像素或相对单位）
```
FontStyle
```
（字符串）：字体样式（normal、italic、oblique）
```
FontWeight
```
（字符串）：字体粗细（normal、bold、lighter、bolder、100-900）

LinearGaugePointers & LinearGaugePointer

Container (

LinearGaugePointers

) for one or more value indicators. Each

LinearGaugePointer

represents a value on the axis.

LinearGaugePointer Properties:

Value & Type:

```
PointerValue
```
(double): Sets the pointer value
```
Type
```
(PointerType): Pointer type (
```
Marker
```
or
```
Bar
```
)

MarkerType

(MarkerType): Shape of marker pointer:

```
Circle
```
```
Rectangle
```
```
Triangle
```
```
Diamond
```
```
InvertedTriangle
```

Appearance:

```
Color
```
(string): Pointer color
```
Width
```
(double): Width of pointer
```
Height
```
(double): Height of pointer
```
Opacity
```
(double): Opacity of pointer (0 to 1)
```
Offset
```
(double): Offset from axis line
```
Placement
```
(Placement): Placement relative to axis (
```
Center
```
,
```
Near
```
,
```
Far
```
)
```
RoundedCornerRadius
```
(double): Radius for rounded corners (bar pointers)

Content:

```
ImageUrl
```
(string): URL for image pointer
```
Text
```
(string): Text to display with text pointer

Interaction:

```
EnableDrag
```
(bool): Allows user to drag the pointer to change value
```
AnimationDuration
```
(double): Duration of value change animation (milliseconds)

Child Components:

```
LinearGaugePointerBorder
```
- Border styling for pointer
```
LinearGaugeMarkerTextStyle
```
- Text styling for text pointers

一个或多个数值指示器的容器（

LinearGaugePointers

）。每个

LinearGaugePointer

代表轴上的一个数值。

LinearGaugePointer属性：

数值与类型：

```
PointerValue
```
（双精度）：设置指针数值
```
Type
```
（PointerType）：指针类型（
```
Marker
```
或
```
Bar
```
）

MarkerType

（MarkerType）：标记指针的形状：

```
Circle
```
```
Rectangle
```
```
Triangle
```
```
Diamond
```
```
InvertedTriangle
```

外观：

```
Color
```
（字符串）：指针颜色
```
Width
```
（双精度）：指针宽度
```
Height
```
（双精度）：指针高度
```
Opacity
```
（双精度）：指针透明度（0到1）
```
Offset
```
（双精度）：相对于轴线的偏移量
```
Placement
```
（Placement）：相对于轴的布局（
```
Center
```
、
```
Near
```
、
```
Far
```
）
```
RoundedCornerRadius
```
（双精度）：圆角半径（条形指针）

内容：

```
ImageUrl
```
（字符串）：图片指针的URL
```
Text
```
（字符串）：文本指针显示的文本

交互：

```
EnableDrag
```
（布尔值）：允许用户拖动指针更改数值
```
AnimationDuration
```
（双精度）：数值更改动画的时长（毫秒）

子组件：

```
LinearGaugePointerBorder
```
- 指针边框样式
```
LinearGaugeMarkerTextStyle
```
- 文本指针的文本样式

Pointer Styling

指针样式

LinearGaugePointerBorder - Pointer border properties

```
Color
```
(string): Border color
```
Width
```
(double): Border width

LinearGaugeMarkerTextStyle - Text styling for pointer text

```
FontFamily
```
(string): Font family
```
FontSize
```
(string): Font size
```
Color
```
(string): Text color
```
FontWeight
```
(string): Font weight
```
Opacity
```
(double): Text opacity

LinearGaugePointerBorder - 指针边框属性

```
Color
```
（字符串）：边框颜色
```
Width
```
（双精度）：边框宽度

LinearGaugeMarkerTextStyle - 指针文本的样式

```
FontFamily
```
（字符串）：字体族
```
FontSize
```
（字符串）：字体大小
```
Color
```
（字符串）：文本颜色
```
FontWeight
```
（字符串）：字体粗细
```
Opacity
```
（双精度）：文本透明度

LinearGaugeRanges & LinearGaugeRange

Container (

LinearGaugeRanges

) for color-coded value zones. Each

LinearGaugeRange

defines a colored region.

LinearGaugeRange Properties:

Range Definition:

```
Start
```
(double): Start value of the range
```
End
```
(double): End value of the range

Appearance:

```
Color
```
(string): Background color of the range
```
StartWidth
```
(double): Width at start of range (for gradient width effect)
```
EndWidth
```
(double): Width at end of range
```
Position
```
(Position): Position relative to axis (
```
Inside
```
,
```
Outside
```
,
```
Cross
```
)
```
Offset
```
(double): Offset from axis line

Child Components:

```
LinearGaugeRangeBorder
```
- Border styling for range
```
LinearGaugeRangeTooltipSettings
```
- Tooltip for range (hover)

LinearGaugeRangeBorder - Range border properties

```
Color
```
(string): Border color
```
Width
```
(double): Border width

颜色编码数值区间的容器（

LinearGaugeRanges

）。每个

LinearGaugeRange

定义一个彩色区域。

LinearGaugeRange属性：

范围定义：

```
Start
```
（双精度）：范围的起始数值
```
End
```
（双精度）：范围的结束数值

外观：

```
Color
```
（字符串）：范围的背景颜色
```
StartWidth
```
（双精度）：范围起始处的宽度（用于渐变宽度效果）
```
EndWidth
```
（双精度）：范围结束处的宽度
```
Position
```
（Position）：相对于轴的位置（
```
Inside
```
、
```
Outside
```
、
```
Cross
```
）
```
Offset
```
（双精度）：相对于轴线的偏移量

子组件：

```
LinearGaugeRangeBorder
```
- 范围边框样式
```
LinearGaugeRangeTooltipSettings
```
- 范围的工具提示（悬停时）

LinearGaugeRangeBorder - 范围边框属性

```
Color
```
（字符串）：边框颜色
```
Width
```
（双精度）：边框宽度

LinearGaugeAnnotations & LinearGaugeAnnotation

Container (

LinearGaugeAnnotations

) for text or HTML overlays. Each

LinearGaugeAnnotation

adds a label or custom content.

LinearGaugeAnnotation Properties:

Content & Positioning:

```
AxisValue
```
(double): Position on the axis where annotation appears
```
AxisIndex
```
(int): Index of the axis (if multiple axes)
```
X
```
(double): Horizontal pixel offset from axis value
```
Y
```
(double): Vertical pixel offset from axis value
```
ZIndex
```
(int): Layer order (higher appears on top)
```
HorizontalAlignment
```
(Alignment): Horizontal alignment (
```
Near
```
,
```
Center
```
,
```
Far
```
)
```
VerticalAlignment
```
(Alignment): Vertical alignment

Content:

```
Content
```
(string): Text or HTML content for annotation
```
ContentTemplate
```
(RenderFragment): Template for rendering annotation content

Child Components:

```
LinearGaugeAnnotationFont
```
- Font styling for text annotations

LinearGaugeAnnotationFont - Font properties for annotations

```
FontFamily
```
(string): Font family
```
FontSize
```
(string): Font size
```
Color
```
(string): Text color
```
FontWeight
```
(string): Font weight
```
Opacity
```
(double): Text opacity

文本或HTML覆盖层的容器（

LinearGaugeAnnotations

）。每个

LinearGaugeAnnotation

添加一个标签或自定义内容。

LinearGaugeAnnotation属性：

内容与定位：

```
AxisValue
```
（双精度）：注释在轴上的显示位置
```
AxisIndex
```
（整数）：轴的索引（如果有多轴）
```
X
```
（双精度）：相对于轴数值的水平像素偏移量
```
Y
```
（双精度）：相对于轴数值的垂直像素偏移量
```
ZIndex
```
（整数）：图层顺序（值越高显示在越上层）
```
HorizontalAlignment
```
（Alignment）：水平对齐（
```
Near
```
、
```
Center
```
、
```
Far
```
）
```
VerticalAlignment
```
（Alignment）：垂直对齐

内容：

```
Content
```
（字符串）：注释的文本或HTML内容
```
ContentTemplate
```
（RenderFragment）：用于渲染注释内容的模板

子组件：

```
LinearGaugeAnnotationFont
```
- 文本注释的字体样式

LinearGaugeAnnotationFont - 注释的字体属性

```
FontFamily
```
（字符串）：字体族
```
FontSize
```
（字符串）：字体大小
```
Color
```
（字符串）：文本颜色
```
FontWeight
```
（字符串）：字体粗细
```
Opacity
```
（双精度）：文本透明度

Gradient Configuration

渐变配置

LinearGaugeLinearGradient - Linear gradient for gauge elements

```
StartValue
```
(double): Start position of gradient
```
EndValue
```
(double): End position of gradient
```
ColorStops
```
(ColorStops): Collection of color stops

LinearGaugeRadialGradient - Radial gradient for gauge elements

```
Radius
```
(string): Radius of radial gradient
```
InnerPosition
```
(InnerPosition): Inner circle position
```
OuterPosition
```
(OuterPosition): Outer circle position
```
ColorStops
```
(ColorStops): Collection of color stops

ColorStop / ColorStops - Gradient color definitions

```
Offset
```
(string): Position in gradient (e.g., "0%", "100%")
```
Color
```
(string): Color at this position
```
Opacity
```
(double): Opacity at this position

LinearGaugeLinearGradient - 仪表盘元素的线性渐变

```
StartValue
```
（双精度）：渐变的起始位置
```
EndValue
```
（双精度）：渐变的结束位置
```
ColorStops
```
（ColorStops）：颜色停止点集合

LinearGaugeRadialGradient - 仪表盘元素的径向渐变

```
Radius
```
（字符串）：径向渐变的半径
```
InnerPosition
```
（InnerPosition）：内圈位置
```
OuterPosition
```
（OuterPosition）：外圈位置
```
ColorStops
```
（ColorStops）：颜色停止点集合

ColorStop / ColorStops - 渐变颜色定义

```
Offset
```
（字符串）：渐变中的位置（例如"0%"、"100%"）
```
Color
```
（字符串）：此位置的颜色
```
Opacity
```
（双精度）：此位置的透明度

Container & Border Styling

容器与边框样式

LinearGaugeContainer - Outer container for the gauge

```
Type
```
(ContainerType): Container type (
```
Normal
```
,
```
RoundedRectangle
```
,
```
Thermometer
```
)
```
Offset
```
(double): Offset from the axis
```
Width
```
(double): Width of container
```
BackgroundColor
```
(string): Background color
```
Border
```
(LinearGaugeContainerBorder): Border styling

LinearGaugeContainerBorder - Container border properties

```
Color
```
(string): Border color
```
Width
```
(double): Border width

LinearGaugeBorder / LinearGaugeBorderSettings - Gauge border properties

```
Color
```
(string): Border color
```
Width
```
(double): Border width

LinearGaugeMargin / LinearGaugeMarginSettings - Margin configuration

```
Left
```
(double): Left margin
```
Right
```
(double): Right margin
```
Top
```
(double): Top margin
```
Bottom
```
(double): Bottom margin

LinearGaugeContainer - 仪表盘的外部容器

```
Type
```
（ContainerType）：容器类型（
```
Normal
```
、
```
RoundedRectangle
```
、
```
Thermometer
```
）
```
Offset
```
（双精度）：相对于轴的偏移量
```
Width
```
（双精度）：容器宽度
```
BackgroundColor
```
（字符串）：背景颜色
```
Border
```
（LinearGaugeContainerBorder）：边框样式

LinearGaugeContainerBorder - 容器边框属性

```
Color
```
（字符串）：边框颜色
```
Width
```
（双精度）：边框宽度

LinearGaugeBorder / LinearGaugeBorderSettings - 仪表盘边框属性

```
Color
```
（字符串）：边框颜色
```
Width
```
（双精度）：边框宽度

LinearGaugeMargin / LinearGaugeMarginSettings - 边距配置

```
Left
```
（双精度）：左边距
```
Right
```
（双精度）：右边距
```
Top
```
（双精度）：上边距
```
Bottom
```
（双精度）：下边距

Tooltip Configuration

工具提示配置

LinearGaugeTooltipSettings - Pointer tooltip configuration

```
Enable
```
(bool): Enable or disable tooltips
```
Format
```
(string): Tooltip text format
```
Position
```
(TooltipPosition): Tooltip position (
```
Top
```
,
```
Bottom
```
,
```
Left
```
,
```
Right
```
)
```
Fill
```
(string): Tooltip background color
```
Opacity
```
(double): Tooltip opacity
```
ShowAtMousePosition
```
(bool): Show at cursor instead of pointer
```
TextStyle
```
(LinearGaugeTooltipTextStyle): Text styling
```
Border
```
(LinearGaugeTooltipBorder): Border styling

LinearGaugeRangeTooltipSettings - Range hover tooltip configuration

Similar properties to tooltip settings for range hovers

LinearGaugeTooltipTextStyle - Tooltip text styling

```
FontFamily
```
(string),
```
FontSize
```
(string),
```
Color
```
(string),
```
FontWeight
```
(string),
```
Opacity
```
(double)

LinearGaugeTooltipSettings - 指针工具提示配置

```
Enable
```
（布尔值）：启用或禁用工具提示
```
Format
```
（字符串）：工具提示文本格式
```
Position
```
（TooltipPosition）：工具提示位置（
```
Top
```
、
```
Bottom
```
、
```
Left
```
、
```
Right
```
）
```
Fill
```
（字符串）：工具提示背景颜色
```
Opacity
```
（双精度）：工具提示透明度
```
ShowAtMousePosition
```
（布尔值）：显示在光标位置而非指针位置
```
TextStyle
```
（LinearGaugeTooltipTextStyle）：文本样式
```
Border
```
（LinearGaugeTooltipBorder）：边框样式

LinearGaugeRangeTooltipSettings - 范围悬停工具提示配置

与指针工具提示配置类似的属性

LinearGaugeTooltipTextStyle - 工具提示文本样式

```
FontFamily
```
（字符串）、
```
FontSize
```
（字符串）、
```
Color
```
（字符串）、
```
FontWeight
```
（字符串）、
```
Opacity
```
（双精度）

Events & Event Arguments

事件与事件参数

LinearGaugeEvents - Event handler component

razor

@using Syncfusion.Blazor.LinearGauge

<LinearGaugeEvents 
    Load="OnLoad"
    Loaded="OnLoaded"
    AxisLabelRendering="OnAxisLabelRendering"
    AnnotationRendering="OnAnnotationRendering"
    ValueChange="OnValueChange"
    TooltipRendering="OnTooltipRendering"
    DragStart="OnDragStart"
    DragMove="OnDragMove"
    DragEnd="OnDragEnd"
    AnimationComplete="OnAnimationComplete"
    ResizeCompleted="OnResizeCompleted"
    OnGaugeMouseDown="OnMouseDown"
    OnGaugeMouseLeave="OnMouseLeave"
    OnGaugeMouseUp="OnMouseUp"
    Print="OnPrint">
</LinearGaugeEvents>

Event Types and Arguments:

Event	Argument Type	Description
`Load`	`LoadEventArgs`	Fires before gauge renders; can cancel with `args.Cancel = true`
`Loaded`	`LoadedEventArgs`	Fires after gauge is successfully rendered
`AxisLabelRendering`	`AxisLabelRenderEventArgs`	Fires before each axis label is rendered; modify `args.Text` to customize
`AnnotationRendering`	`AnnotationRenderEventArgs`	Fires before annotation is rendered; modify `args.Content` to customize
`ValueChange`	`ValueChangeEventArgs`	Fires when pointer value changes (user drag or programmatic); provides `Value` , `PointerIndex` , `AxisIndex`
`TooltipRendering`	`TooltipRenderEventArgs`	Fires before tooltip displays; customize `args.Content`
`DragStart`	`PointerDragEventArgs`	Fires when user starts dragging pointer; provides `CurrentValue` , `PointerIndex` , `AxisIndex`
`DragMove`	`PointerDragEventArgs`	Fires continuously during pointer drag; provides current value
`DragEnd`	`PointerDragEventArgs`	Fires when user releases pointer after drag
`AnimationComplete`	`AnimationCompleteEventArgs`	Fires when pointer animation completes
`ResizeCompleted`	`ResizeEventArgs`	Fires after gauge is resized; provides `CurrentSize` , `PreviousSize`
`OnGaugeMouseDown`	`MouseEventArgs`	Fires on mouse down on gauge
`OnGaugeMouseLeave`	`MouseEventArgs`	Fires when mouse leaves gauge
`OnGaugeMouseUp`	`MouseEventArgs`	Fires on mouse up on gauge
`Print`	`PrintEventArgs`	Fires before printing

LinearGaugeEvents - 事件处理组件

razor

@using Syncfusion.Blazor.LinearGauge

<LinearGaugeEvents 
    Load="OnLoad"
    Loaded="OnLoaded"
    AxisLabelRendering="OnAxisLabelRendering"
    AnnotationRendering="OnAnnotationRendering"
    ValueChange="OnValueChange"
    TooltipRendering="OnTooltipRendering"
    DragStart="OnDragStart"
    DragMove="OnDragMove"
    DragEnd="OnDragEnd"
    AnimationComplete="OnAnimationComplete"
    ResizeCompleted="OnResizeCompleted"
    OnGaugeMouseDown="OnMouseDown"
    OnGaugeMouseLeave="OnMouseLeave"
    OnGaugeMouseUp="OnMouseUp"
    Print="OnPrint">
</LinearGaugeEvents>

事件类型与参数：

事件	参数类型	描述
`Load`	`LoadEventArgs`	仪表盘渲染前触发；可通过 `args.Cancel = true` 取消渲染
`Loaded`	`LoadedEventArgs`	仪表盘成功渲染后触发
`AxisLabelRendering`	`AxisLabelRenderEventArgs`	每个轴标签渲染前触发；可修改 `args.Text` 进行定制
`AnnotationRendering`	`AnnotationRenderEventArgs`	注释渲染前触发；可修改 `args.Content` 进行定制
`ValueChange`	`ValueChangeEventArgs`	指针数值更改时触发（用户拖动或程序化操作）；提供 `Value` 、 `PointerIndex` 、 `AxisIndex`
`TooltipRendering`	`TooltipRenderEventArgs`	工具提示显示前触发；可定制 `args.Content`
`DragStart`	`PointerDragEventArgs`	用户开始拖动指针时触发；提供 `CurrentValue` 、 `PointerIndex` 、 `AxisIndex`
`DragMove`	`PointerDragEventArgs`	指针拖动过程中持续触发；提供当前数值
`DragEnd`	`PointerDragEventArgs`	用户释放拖动的指针时触发
`AnimationComplete`	`AnimationCompleteEventArgs`	指针动画完成时触发
`ResizeCompleted`	`ResizeEventArgs`	仪表盘调整大小后触发；提供 `CurrentSize` 、 `PreviousSize`
`OnGaugeMouseDown`	`MouseEventArgs`	在仪表盘上按下鼠标时触发
`OnGaugeMouseLeave`	`MouseEventArgs`	鼠标离开仪表盘时触发
`OnGaugeMouseUp`	`MouseEventArgs`	在仪表盘上松开鼠标时触发
`Print`	`PrintEventArgs`	打印前触发

Enums

枚举

Orientation - Gauge layout direction

csharp

Orientation.Horizontal  // Horizontal scale
Orientation.Vertical    // Vertical scale

Position - Element positioning relative to axis

csharp

Position.Inside      // Inside the axis
Position.Outside     // Outside the axis
Position.Cross       // Crossing the axis line

PointerType - Type of value indicator

csharp

PointerType.Marker   // Shaped marker (circle, square, etc.)
PointerType.Bar      // Bar/rectangle pointer

MarkerType - Shape of marker pointer

csharp

MarkerType.Circle
MarkerType.Rectangle
MarkerType.Triangle
MarkerType.Diamond
MarkerType.InvertedTriangle

Placement - Pointer position relative to axis

csharp

Placement.Center     // Centered on axis
Placement.Near       // Near side
Placement.Far        // Far side

ContainerType - Container shape

csharp

ContainerType.Normal              // Rectangular container
ContainerType.RoundedRectangle    // Rounded rectangle
ContainerType.Thermometer         // Thermometer shape

ExportType - Export format

csharp

ExportType.PNG   // Export as PNG image
ExportType.SVG   // Export as SVG image
ExportType.PDF   // Export as PDF document

TooltipPosition - Tooltip placement

csharp

TooltipPosition.Top      // Above the pointer
TooltipPosition.Bottom   // Below the pointer
TooltipPosition.Left     // Left of pointer
TooltipPosition.Right    // Right of pointer

Theme - Predefined color themes

csharp

Theme.Bootstrap
Theme.Material
Theme.Fabric
Theme.Fluent
Theme.Tailwind
Theme.Bootstrap5
Theme.FluentDark
Theme.MaterialDark
Theme.BootstrapDark
Theme.TailwindDark
// ... and others

Orientation - 仪表盘布局方向

csharp

Orientation.Horizontal  // 水平刻度
Orientation.Vertical    // 垂直刻度

Position - 元素相对于轴的位置

csharp

Position.Inside      // 轴内部
Position.Outside     // 轴外部
Position.Cross       // 穿过轴线

PointerType - 数值指示器类型

csharp

PointerType.Marker   // 形状标记（圆形、方形等）
PointerType.Bar      // 条形/矩形指针

MarkerType - 标记指针的形状

csharp

MarkerType.Circle
MarkerType.Rectangle
MarkerType.Triangle
MarkerType.Diamond
MarkerType.InvertedTriangle

Placement - 指针相对于轴的位置

csharp

Placement.Center     // 轴中心
Placement.Near       // 近侧
Placement.Far        // 远侧

ContainerType - 容器形状

csharp

ContainerType.Normal              // 矩形容器
ContainerType.RoundedRectangle    // 圆角矩形
ContainerType.Thermometer         // 温度计形状

ExportType - 导出格式

csharp

ExportType.PNG   // 导出为PNG图片
ExportType.SVG   // 导出为SVG图片
ExportType.PDF   // 导出为PDF文档

TooltipPosition - 工具提示布局

csharp

TooltipPosition.Top      // 指针上方
TooltipPosition.Bottom   // 指针下方
TooltipPosition.Left     // 指针左侧
TooltipPosition.Right    // 指针右侧

Theme - 预定义配色主题

csharp

Theme.Bootstrap
Theme.Material
Theme.Fabric
Theme.Fluent
Theme.Tailwind
Theme.Bootstrap5
Theme.FluentDark
Theme.MaterialDark
Theme.BootstrapDark
Theme.TailwindDark
// ... 其他主题

Primary Component Hierarchy

主要组件层级

SfLinearGauge (root)
├── LinearGaugeTitleStyle
├── LinearGaugeMargin
├── LinearGaugeBorder
├── LinearGaugeContainer
│   └── LinearGaugeContainerBorder
├── LinearGaugeAxes
│   └── LinearGaugeAxis (repeatable)
│       ├── LinearGaugeLine
│       ├── LinearGaugeMajorTicks
│       ├── LinearGaugeMinorTicks
│       ├── LinearGaugeAxisLabelStyle
│       ├── LinearGaugeAxisLabelFont
│       ├── LinearGaugeContainer
│       ├── LinearGaugeLinearGradient
│       ├── LinearGaugeRadialGradient
│       ├── LinearGaugePointers
│       │   └── LinearGaugePointer (repeatable)
│       │       ├── LinearGaugePointerBorder
│       │       └── LinearGaugeMarkerTextStyle
│       └── LinearGaugeRanges
│           └── LinearGaugeRange (repeatable)
│               ├── LinearGaugeRangeBorder
│               └── LinearGaugeRangeTooltipSettings
├── LinearGaugeAnnotations
│   └── LinearGaugeAnnotation (repeatable)
│       └── LinearGaugeAnnotationFont
├── LinearGaugeTooltipSettings
│   ├── LinearGaugeTooltipTextStyle
│   └── LinearGaugeTooltipBorder
└── LinearGaugeEvents
    ├── Load handler
    ├── Loaded handler
    ├── AxisLabelRendering handler
    ├── AnnotationRendering handler
    ├── ValueChange handler
    ├── TooltipRendering handler
    ├── DragStart/Move/End handlers
    ├── AnimationComplete handler
    └── ... more event handlers

SfLinearGauge (根组件)
├── LinearGaugeTitleStyle
├── LinearGaugeMargin
├── LinearGaugeBorder
├── LinearGaugeContainer
│   └── LinearGaugeContainerBorder
├── LinearGaugeAxes
│   └── LinearGaugeAxis（可重复）
│       ├── LinearGaugeLine
│       ├── LinearGaugeMajorTicks
│       ├── LinearGaugeMinorTicks
│       ├── LinearGaugeAxisLabelStyle
│       ├── LinearGaugeAxisLabelFont
│       ├── LinearGaugeContainer
│       ├── LinearGaugeLinearGradient
│       ├── LinearGaugeRadialGradient
│       ├── LinearGaugePointers
│       │   └── LinearGaugePointer（可重复）
│       │       ├── LinearGaugePointerBorder
│       │       └── LinearGaugeMarkerTextStyle
│       └── LinearGaugeRanges
│           └── LinearGaugeRange（可重复）
│               ├── LinearGaugeRangeBorder
│               └── LinearGaugeRangeTooltipSettings
├── LinearGaugeAnnotations
│   └── LinearGaugeAnnotation（可重复）
│       └── LinearGaugeAnnotationFont
├── LinearGaugeTooltipSettings
│   ├── LinearGaugeTooltipTextStyle
│   └── LinearGaugeTooltipBorder
└── LinearGaugeEvents
    ├── Load处理程序
    ├── Loaded处理程序
    ├── AxisLabelRendering处理程序
    ├── AnnotationRendering处理程序
    ├── ValueChange处理程序
    ├── TooltipRendering处理程序
    ├── DragStart/Move/End处理程序
    ├── AnimationComplete处理程序
    └── ... 更多事件处理程序

Practical API Usage Notes

实用API使用注意事项

Async Methods: All component methods (
```
SetPointerValueAsync
```
,
```
SetAnnotationValueAsync
```
,
```
RefreshAsync
```
,
```
PrintAsync
```
,
```
ExportAsync
```
) are asynchronous and must be awaited.
Export Prerequisites: Ensure
```
AllowPdfExport="true"
```
,
```
AllowImageExport="true"
```
, or
```
AllowPrint="true"
```
on the gauge before calling corresponding export or print methods.
Animation: Set
```
AnimationDuration="0"
```
for instant updates, or higher values for smooth animated transitions.
Event Arguments: Event handler arguments are provided by the framework and contain context-specific information (e.g.,
```
ValueChangeEventArgs
```
contains the new value).
Index-Based Access: When using
```
SetPointerValueAsync
```
or
```
SetAnnotationValueAsync
```
, use zero-based indices for axes, pointers, and annotations.
Performance: For frequent updates (e.g., every 100ms), consider batching updates or using
```
AnimationDuration="0"
```
to avoid animation overhead.
Accessibility: Use
```
Description
```
,
```
Title
```
, and proper ARIA labels when the gauge needs to be accessible to screen readers.

异步方法：所有组件方法（
```
SetPointerValueAsync
```
、
```
SetAnnotationValueAsync
```
、
```
RefreshAsync
```
、
```
PrintAsync
```
、
```
ExportAsync
```
）都是异步的，必须使用await调用。
导出前提：在调用对应的导出或打印方法前，确保仪表盘已设置
```
AllowPdfExport="true"
```
、
```
AllowImageExport="true"
```
或
```
AllowPrint="true"
```
。
动画：设置
```
AnimationDuration="0"
```
可实现即时更新，设置更高的值可实现平滑动画过渡。
事件参数：事件处理程序参数由框架提供，包含特定上下文信息（例如
```
ValueChangeEventArgs
```
包含新数值）。
基于索引的访问：使用
```
SetPointerValueAsync
```
或
```
SetAnnotationValueAsync
```
时，轴、指针和注释使用从零开始的索引。
性能：对于频繁更新（例如每100ms一次），考虑批量更新或使用
```
AnimationDuration="0"
```
以避免动画开销。
无障碍：当仪表盘需要适配屏幕阅读器时，使用
```
Description
```
、
```
Title
```
和合适的ARIA标签。

Complete Component List

完整组件列表

Component Classes (from Syncfusion.Blazor.LinearGauge namespace):

```
SfLinearGauge
```
- Main component
```
LinearGaugeAnnotation
```
- Annotation element
```
LinearGaugeAnnotationFont
```
- Annotation font styling
```
LinearGaugeAnnotations
```
- Annotation collection
```
LinearGaugeAxes
```
- Axis collection
```
LinearGaugeAxis
```
- Axis configuration
```
LinearGaugeAxisLabelFont
```
- Axis label font
```
LinearGaugeAxisLabelStyle
```
- Axis label styling
```
LinearGaugeBorder
```
- Gauge border
```
LinearGaugeBorderSettings
```
- Border settings
```
LinearGaugeContainer
```
- Container configuration
```
LinearGaugeContainerBorder
```
- Container border
```
LinearGaugeEvents
```
- Event handlers
```
LinearGaugeFontSettings
```
- Font configuration
```
LinearGaugeLine
```
- Axis line
```
LinearGaugeLinearGradient
```
- Linear gradient
```
LinearGaugeMajorTicks
```
- Major tick marks
```
LinearGaugeMargin
```
- Margin settings
```
LinearGaugeMarginSettings
```
- Margin configuration
```
LinearGaugeMarkerTextStyle
```
- Marker text styling
```
LinearGaugeMinorTicks
```
- Minor tick marks
```
LinearGaugePointer
```
- Pointer element
```
LinearGaugePointerBorder
```
- Pointer border
```
LinearGaugePointers
```
- Pointer collection
```
LinearGaugeRadialGradient
```
- Radial gradient
```
LinearGaugeRange
```
- Range element
```
LinearGaugeRangeBorder
```
- Range border
```
LinearGaugeRangeTooltipBorder
```
- Range tooltip border
```
LinearGaugeRangeTooltipSettings
```
- Range tooltip
```
LinearGaugeRangeTooltipTextStyle
```
- Range tooltip text
```
LinearGaugeRanges
```
- Range collection
```
LinearGaugeTickSettings
```
- Tick configuration
```
LinearGaugeTitleStyle
```
- Title styling
```
LinearGaugeTooltipBorder
```
- Tooltip border
```
LinearGaugeTooltipSettings
```
- Tooltip configuration
```
LinearGaugeTooltipTextStyle
```
- Tooltip text styling
```
LinearGradient
```
- Linear gradient definition
```
RadialGradient
```
- Radial gradient definition
```
ColorStop
```
- Gradient color stop
```
ColorStops
```
- Gradient color stops collection
```
Point
```
- Pointer type enum
```
GradientPosition
```
- Gradient position
```
InnerPosition
```
- Inner gradient position
```
OuterPosition
```
- Outer gradient position

Event Argument Classes:

```
LoadEventArgs
```
```
LoadedEventArgs
```
```
AxisLabelRenderEventArgs
```
```
AnnotationRenderEventArgs
```
```
ValueChangeEventArgs
```
```
TooltipRenderEventArgs
```
```
PointerDragEventArgs
```
```
ResizeEventArgs
```
```
MouseEventArgs
```
```
PrintEventArgs
```
```
AnimationCompleteEventArgs
```

Enum Types:

```
Orientation
```
- Horizontal or Vertical
```
Position
```
- Inside, Outside, Cross
```
PointerType
```
- Marker or Bar
```
MarkerType
```
- Circle, Rectangle, Triangle, Diamond, InvertedTriangle
```
Placement
```
- Center, Near, Far
```
ContainerType
```
- Normal, RoundedRectangle, Thermometer
```
ExportType
```
- PNG, SVG, PDF
```
TooltipPosition
```
- Top, Bottom, Left, Right
```
Theme
```
- Various theme options
```
Alignment
```
- Near, Center, Far
```
PdfPageOrientation
```
- Portrait, Landscape

组件类（来自Syncfusion.Blazor.LinearGauge命名空间）：

```
SfLinearGauge
```
- 主组件
```
LinearGaugeAnnotation
```
- 注释元素
```
LinearGaugeAnnotationFont
```
- 注释字体样式
```
LinearGaugeAnnotations
```
- 注释集合
```
LinearGaugeAxes
```
- 轴集合
```
LinearGaugeAxis
```
- 轴配置
```
LinearGaugeAxisLabelFont
```
- 轴标签字体
```
LinearGaugeAxisLabelStyle
```
- 轴标签样式
```
LinearGaugeBorder
```
- 仪表盘边框
```
LinearGaugeBorderSettings
```
- 边框设置
```
LinearGaugeContainer
```
- 容器配置
```
LinearGaugeContainerBorder
```
- 容器边框
```
LinearGaugeEvents
```
- 事件处理程序
```
LinearGaugeFontSettings
```
- 字体配置
```
LinearGaugeLine
```
- 轴线
```
LinearGaugeLinearGradient
```
- 线性渐变
```
LinearGaugeMajorTicks
```
- 主刻度标记
```
LinearGaugeMargin
```
- 边距设置
```
LinearGaugeMarginSettings
```
- 边距配置
```
LinearGaugeMarkerTextStyle
```
- 标记文本样式
```
LinearGaugeMinorTicks
```
- 次刻度标记
```
LinearGaugePointer
```
- 指针元素
```
LinearGaugePointerBorder
```
- 指针边框
```
LinearGaugePointers
```
- 指针集合
```
LinearGaugeRadialGradient
```
- 径向渐变
```
LinearGaugeRange
```
- 范围元素
```
LinearGaugeRangeBorder
```
- 范围边框
```
LinearGaugeRangeTooltipBorder
```
- 范围工具提示边框
```
LinearGaugeRangeTooltipSettings
```
- 范围工具提示
```
LinearGaugeRangeTooltipTextStyle
```
- 范围工具提示文本
```
LinearGaugeRanges
```
- 范围集合
```
LinearGaugeTickSettings
```
- 刻度配置
```
LinearGaugeTitleStyle
```
- 标题样式
```
LinearGaugeTooltipBorder
```
- 工具提示边框
```
LinearGaugeTooltipSettings
```
- 工具提示配置
```
LinearGaugeTooltipTextStyle
```
- 工具提示文本样式
```
LinearGradient
```
- 线性渐变定义
```
RadialGradient
```
- 径向渐变定义
```
ColorStop
```
- 渐变颜色停止点
```
ColorStops
```
- 渐变颜色停止点集合
```
Point
```
- 指针类型枚举
```
GradientPosition
```
- 渐变位置
```
InnerPosition
```
- 内部渐变位置
```
OuterPosition
```
- 外部渐变位置

事件参数类：

```
LoadEventArgs
```
```
LoadedEventArgs
```
```
AxisLabelRenderEventArgs
```
```
AnnotationRenderEventArgs
```
```
ValueChangeEventArgs
```
```
TooltipRenderEventArgs
```
```
PointerDragEventArgs
```
```
ResizeEventArgs
```
```
MouseEventArgs
```
```
PrintEventArgs
```
```
AnimationCompleteEventArgs
```

枚举类型：

```
Orientation
```
- 水平或垂直
```
Position
```
- 内部、外部、交叉
```
PointerType
```
- 标记或条形
```
MarkerType
```
- 圆形、矩形、三角形、菱形、倒三角形
```
Placement
```
- 中心、近侧、远侧
```
ContainerType
```
- 普通、圆角矩形、温度计
```
ExportType
```
- PNG、SVG、PDF
```
TooltipPosition
```
- 上、下、左、右
```
Theme
```
- 多种主题选项
```
Alignment
```
- 近、中、远
```
PdfPageOrientation
```
- 纵向、横向

Common Use Cases

常见用例

1. Dashboard KPI Display

1. 仪表板KPI展示

Display key performance indicators with color-coded ranges for quick status assessment. Use multiple gauges for different metrics.

显示关键绩效指标，使用颜色编码范围快速评估状态。为不同指标使用多个仪表盘。

2. Temperature Monitoring

2. 温度监控

Visualize temperature readings with appropriate ranges for different zones (freezing, normal, warning, critical).

可视化温度读数，为不同区间（冻结、正常、警告、临界）设置合适的范围。

3. Progress Tracking

3. 进度跟踪

Show task completion, project progress, or goal achievement using bar pointers on horizontal gauges.

使用水平仪表盘的条形指针显示任务完成情况、项目进度或目标达成情况。

4. Speedometer/Tachometer

4. 速度表/转速表

Create vehicle dashboard components with styled pointers and ranges for speed or RPM display.

创建车辆仪表板组件，使用样式化指针和范围显示速度或转速。

5. Sensor Data Visualization

5. 传感器数据可视化

Display real-time sensor readings (pressure, humidity, voltage) with dynamic pointer updates and threshold indicators.

展示实时传感器读数（压力、湿度、电压），支持动态指针更新和阈值指示器。

6. Survey/Rating Display

6. 调查/评分展示

Visualize survey results or ratings on a scale with markers showing average values and ranges for distribution.

在刻度上可视化调查结果或评分，使用标记显示平均值和分布范围。

7. Budget vs. Actual

7. 预算vs实际

Show financial metrics comparing budgeted vs. actual values using multiple pointers on the same axis.

使用同一轴上的多指针显示财务指标，对比预算与实际数值。

8. Stock/Inventory Levels

8. 库存水平

Display inventory levels with color-coded ranges (critical, low, adequate, full) for quick status checks.

使用颜色编码范围（临界、低、充足、满）显示库存水平，便于快速状态检查。

Tips for Implementation

实现技巧

When Starting

开始阶段

Begin with getting-started.md for setup
Add basic axis and pointer to verify functionality
Gradually add ranges, styling, and interactivity

从getting-started.md开始进行设置
添加基础轴和指针以验证功能
逐步添加范围、样式和交互性

For Customization

定制阶段

Use axes-configuration.md for scale customization
Use pointers.md for pointer styling
Use appearance-and-styling.md for overall look

使用axes-configuration.md进行刻度定制
使用pointers.md进行指针样式设置
使用appearance-and-styling.md调整整体外观

For Interactivity

交互阶段

Enable pointer dragging for user input
Add tooltips for value display
Use events for responding to user actions
See user-interaction.md and methods-and-events.md

启用指针拖动以支持用户输入
添加工具提示显示数值
使用事件响应用户操作
参考user-interaction.md和methods-and-events.md

For Production

生产阶段

Implement accessibility features from accessibility-and-internationalization.md
Test with keyboard navigation
Verify screen reader compatibility
Configure proper ARIA labels

从accessibility-and-internationalization.md实现无障碍特性
测试键盘导航
验证屏幕阅读器兼容性
配置合适的ARIA标签

Next Steps

下一步

New to Linear Gauge? Start with getting-started.md
Need specific feature? Navigate to the relevant reference file based on your requirement
Building dashboard? Combine multiple patterns and refer to appearance-and-styling.md
Need interactivity? Check user-interaction.md and methods-and-events.md

All reference files are comprehensive and self-contained - you won't need to jump between multiple files for a single topic.

首次接触Linear Gauge？ 从getting-started.md开始
需要特定功能？ 根据需求导航到对应的参考文档
构建仪表板？ 结合多种模式并参考appearance-and-styling.md
需要交互性？ 查看user-interaction.md和methods-and-events.md

所有参考文档都是全面且独立的——针对单个主题无需在多个文档间切换。