syncfusion-flutter-gauges

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Flutter Gauges

Syncfusion Flutter 仪表组件

This skill covers two related Syncfusion Flutter components for data visualization and measurement displays: SfLinearGauge (Linear Gauge) and SfRadialGauge (Radial Gauge). While they share many visual and configuration features, they serve different display purposes with distinct visual representations.

本指南介绍Syncfusion提供的两款用于数据可视化和测量值展示的Flutter组件：SfLinearGauge（线性仪表） 和 SfRadialGauge（径向仪表）。二者共享大量视觉和配置特性，但视觉表现形式不同，适用的展示场景也有所区别。

When to Use This Skill

何时使用本指南

Use this skill when you need to:

Display data on linear or radial scales for visual measurement representation
Create progress indicators with custom styling and animations
Build dashboard visualizations with KPIs, metrics, or performance indicators
Implement measurement displays (speedometers, thermometers, pressure gauges)
Add interactive gauges with draggable pointers and value changes
Visualize ranges and thresholds on linear or circular scales
Create custom gauge controls for volume, brightness, or rating inputs
Display analog-style indicators in modern Flutter applications
Build battery, signal, or status indicators with gauge representations
Customize gauge appearance with colors, gradients, animations, and styling

当你需要实现以下需求时可参考本指南：

在线性或径向刻度上展示数据，实现可视化的测量效果
创建支持自定义样式和动画的进度指示器
搭建包含KPI、指标、性能数据的仪表盘可视化页面
实现测量值展示组件（速度表、温度计、压力表）
添加支持拖拽指针、数值修改的交互式仪表
在线性或圆形刻度上可视化展示区间和阈值
创建用于音量、亮度、评分输入的自定义仪表控件
在现代Flutter应用中展示模拟风格的指示器
用仪表形式构建电量、信号、状态指示器
通过颜色、渐变、动画、样式自定义仪表外观

Choosing the Right Component

如何选择合适的组件

Use SfLinearGauge (Linear Gauge) when:

以下场景适合使用 SfLinearGauge（线性仪表）：

You need horizontal or vertical measurement displays
Your data is best represented on a linear scale (bar-style)
You want bar pointers for progress or level indicators
Orientation flexibility is important (rotate 90° easily)
Mirror effect is needed for symmetric displays
Building: progress bars, sliders, battery indicators, volume controls, horizontal dashboards

需要水平或垂直的测量值展示
数据更适合用线性刻度（条形样式）呈现
需要用条形指针做进度或水位指示器
方向灵活性很重要（可轻松旋转90度）
需要镜像效果实现对称展示
适用场景：进度条、滑块、电量指示器、音量控件、横向仪表盘

Use SfRadialGauge (Radial Gauge) when:

以下场景适合使用 SfRadialGauge（径向仪表）：

You need circular or arc-shaped displays
Your visualization requires a needle pointer (classic gauge style)
You want 360-degree or semi-circle representations
Annotations with widgets need to be placed on the gauge
Title support is needed above the gauge
Export to image functionality is required
Building: speedometers, RPM meters, temperature gauges, compass displays, clock faces, circular progress

需要圆形或弧形展示
可视化需要指针样式（经典仪表风格）
需要360度或半圆形的呈现形式
需要在仪表上放置带Widget的注释
需要仪表上方支持标题展示
需要导出为图片的功能
适用场景：速度表、转速表、温度计、指南针、时钟表盘、圆形进度条

Key Differences Summary:

核心差异汇总:

Feature	SfLinearGauge	SfRadialGauge
Primary Shape	Linear (horizontal/vertical)	Circular/Arc
Orientation	Horizontal, Vertical	Circular (360°)
Bar Pointer	✅ Yes	❌ No
Needle Pointer	❌ No	✅ Yes
Range Pointer	❌ No	✅ Yes
Marker Pointer	✅ Shape & Widget	✅ Shape & Widget
Mirror Effect	✅ Yes	❌ No
Annotations	❌ No	✅ Yes
Title Support	❌ No	✅ Yes
Export to Image	❌ No	✅ Yes
Multiple Axes	❌ Limited	✅ Yes
Axis Angles	N/A	✅ Configurable

特性	SfLinearGauge	SfRadialGauge
主要形状	线性（水平/垂直）	圆形/弧形
方向	水平、垂直	圆形（360°）
条形指针	✅ 支持	❌ 不支持
指针	❌ 不支持	✅ 支持
区间指针	❌ 不支持	✅ 支持
标记指针	✅ 支持形状和Widget	✅ 支持形状和Widget
镜像效果	✅ 支持	❌ 不支持
注释	❌ 不支持	✅ 支持
标题支持	❌ 不支持	✅ 支持
导出图片	❌ 不支持	✅ 支持
多坐标轴	❌ 支持有限	✅ 支持
坐标轴角度	不适用	✅ 可配置

Documentation and Navigation Guide

文档导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup for both components
Basic SfLinearGauge implementation
Basic SfRadialGauge implementation
Package dependencies and imports
Quick comparison and first examples

📄 阅读： references/getting-started.md

两款组件的安装和包配置
SfLinearGauge基础实现
SfRadialGauge基础实现
包依赖和导入
快速对比和入门示例

Component Overview

组件概览

📄 For Linear Gauge: references/linear-gauge-overview.md

SfLinearGauge widget overview and features
When to use Linear Gauge vs Radial Gauge
Orientation options (horizontal/vertical)
Linear gauge-specific capabilities
Basic linear gauge configuration

📄 For Radial Gauge: references/radial-gauge-overview.md

SfRadialGauge widget overview and features
When to use Radial Gauge vs Linear Gauge
Circular and arc configurations
Radial gauge-specific capabilities
Title and multi-axis support
Basic radial gauge configuration

📄 线性仪表参考： references/linear-gauge-overview.md

SfLinearGauge组件概览和特性
线性仪表与径向仪表的适用场景对比
方向选项（水平/垂直）
线性仪表专属能力
线性仪表基础配置

📄 径向仪表参考： references/radial-gauge-overview.md

SfRadialGauge组件概览和特性
径向仪表与线性仪表的适用场景对比
圆形和弧形配置
径向仪表专属能力
标题和多轴支持
径向仪表基础配置

Axes and Scales

坐标轴与刻度

📄 Read: references/axes.md

Axis customization for both gauges
Linear axis (track, thickness, colors)
Radial axis (circular arc, angles, radius)
Minimum and maximum values
Axis intervals and scale
Axis line styling and gradients
Labels and ticks positioning
Inverse axis direction
Custom scales and renderers
Multiple axes (radial)

📄 阅读： references/axes.md

两类仪表的坐标轴自定义
线性坐标轴（轨道、厚度、颜色）
径向坐标轴（圆弧、角度、半径）
minimum和maximum取值范围
坐标轴间隔和刻度设置
坐标轴线条样式和渐变
标签和刻度位置调整
坐标轴反向设置
自定义刻度和渲染器
多坐标轴配置（仅径向仪表支持）

Pointers

指针

📄 Read: references/pointers.md

Pointer types overview
Shape/Marker pointers (both gauges)
Widget pointers (both gauges)
Bar pointer (Linear Gauge only)
Needle pointer (Radial Gauge only)
Range pointer (Radial Gauge only)
Multiple pointers configuration
Pointer positioning and styling
Pointer comparison and selection guide

📄 阅读： references/pointers.md

指针类型概览
形状/标记指针（两类仪表均支持）
Widget指针（两类仪表均支持）
条形指针（仅线性仪表支持）
指针（仅径向仪表支持）
区间指针（仅径向仪表支持）
多指针配置
指针位置和样式设置
指针对比和选择指南

Ranges

区间

📄 Read: references/ranges.md

Range visualization concepts
Adding ranges to Linear Gauge
Adding ranges to Radial Gauge
Range colors and gradients
Range positioning and thickness
Multiple ranges configuration
Range use cases and patterns

📄 阅读： references/ranges.md

区间可视化概念
向线性仪表添加区间
向径向仪表添加区间
区间颜色和渐变设置
区间位置和厚度调整
多区间配置
区间使用场景和最佳实践

Customization and Styling

自定义与样式

📄 Read: references/customization.md

Visual appearance for both gauges
Colors (solid and gradients)
Thickness and sizing
Border customization
Corner and edge styles
Background colors and images
Theme integration
Label and tick styling

📄 阅读： references/customization.md

两类仪表的视觉外观调整
颜色（纯色和渐变）设置
厚度和尺寸调整
边框自定义
边角样式设置
背景颜色和图片
主题集成
标签和刻度样式自定义

Animation

动画

📄 Read: references/animation.md

Animation support in both gauges
Pointer animations
Axis and range animations
Animation duration and easing
enableAnimation property
Animation callbacks
Loading animations

📄 阅读： references/animation.md

两类仪表的动画支持
指针动画
坐标轴和区间动画
动画时长和缓动效果设置
enableAnimation属性用法
动画回调
加载动画实现

Interaction

交互

📄 Read: references/interaction.md

Pointer dragging for both gauges
enableDragging property
Value change events
onValueChangeStart, onValueChanging, onValueChanged, onValueChangeEnd
Touch and gesture support
Interactive value updates
Restricting drag ranges

📄 阅读： references/interaction.md

两类仪表的指针拖拽功能
enableDragging属性用法
数值变更事件
onValueChangeStart、onValueChanging、onValueChanged、onValueChangeEnd回调说明
触摸和手势支持
交互式数值更新
拖拽范围限制

Accessibility

无障碍支持

📄 Read: references/accessibility.md

Screen reader support
Semantic labels for gauges
WCAG compliance
Keyboard navigation
Accessibility for Linear Gauge
Accessibility for Radial Gauge
Best practices

📄 阅读： references/accessibility.md

屏幕阅读器支持
仪表语义标签设置
WCAG合规说明
键盘导航
线性仪表无障碍配置
径向仪表无障碍配置
最佳实践

Advanced Features

高级特性

📄 Read: references/advanced-features.md

Mirror gauge (Linear Gauge)
Annotations with widgets (Radial Gauge)
Export to image (Radial Gauge)
Background images (Radial Gauge)
Custom label formatting
Custom renderers and builders
Special configurations
Edge cases and troubleshooting

📄 阅读： references/advanced-features.md

仪表镜像（仅线性仪表支持）
带Widget的注释（仅径向仪表支持）
导出为图片（仅径向仪表支持）
背景图片（仅径向仪表支持）
自定义标签格式化
自定义渲染器和构建器
特殊配置
边缘场景和问题排查

Quick Start Examples

快速入门示例

For detailed setup instructions, see Getting Started.

详细的配置说明请参考入门指南。

Basic Linear Gauge

基础线性仪表

dart

import 'package:syncfusion_flutter_gauges/gauges.dart';

SfLinearGauge(
  minimum: 0,
  maximum: 100,
  barPointers: [LinearBarPointer(value: 60)],
  markerPointers: [LinearShapePointer(value: 60)],
)

dart

import 'package:syncfusion_flutter_gauges/gauges.dart';

SfLinearGauge(
  minimum: 0,
  maximum: 100,
  barPointers: [LinearBarPointer(value: 60)],
  markerPointers: [LinearShapePointer(value: 60)],
)

Basic Radial Gauge

基础径向仪表

dart

import 'package:syncfusion_flutter_gauges/gauges.dart';

SfRadialGauge(
  axes: [
    RadialAxis(
      minimum: 0,
      maximum: 150,
      pointers: [NeedlePointer(value: 90)],
    ),
  ],
)

dart

import 'package:syncfusion_flutter_gauges/gauges.dart';

SfRadialGauge(
  axes: [
    RadialAxis(
      minimum: 0,
      maximum: 150,
      pointers: [NeedlePointer(value: 90)],
    ),
  ],
)

Interactive Gauge (Draggable)

交互式仪表（可拖拽）

dart

double _value = 50.0;

// Linear with dragging
SfLinearGauge(
  markerPointers: [
    LinearShapePointer(
      value: _value,
      enableDragging: true,
      onChanged: (v) => setState(() => _value = v),
    ),
  ],
)

// Radial with dragging
SfRadialGauge(
  axes: [
    RadialAxis(
      pointers: [
        NeedlePointer(
          value: _value,
          enableDragging: true,
          onValueChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  ],
)

dart

double _value = 50.0;

// 可拖拽线性仪表
SfLinearGauge(
  markerPointers: [
    LinearShapePointer(
      value: _value,
      enableDragging: true,
      onChanged: (v) => setState(() => _value = v),
    ),
  ],
)

// 可拖拽径向仪表
SfRadialGauge(
  axes: [
    RadialAxis(
      pointers: [
        NeedlePointer(
          value: _value,
          enableDragging: true,
          onValueChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  ],
)

Common Patterns

常用模式

Multi-Range Status Indicators:

dart

ranges: [
  LinearGaugeRange(startValue: 0, endValue: 30, color: Colors.red),
  LinearGaugeRange(startValue: 30, endValue: 70, color: Colors.yellow),
  LinearGaugeRange(startValue: 70, endValue: 100, color: Colors.green),
]

Gradient Styling:

dart

axisTrackStyle: LinearAxisTrackStyle(
  gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
)

Vertical Orientation:

dart

SfLinearGauge(
  orientation: LinearGaugeOrientation.vertical,
  barPointers: [LinearBarPointer(value: 75)],
)

Custom Angles (Semi-Circle):

dart

RadialAxis(startAngle: 180, endAngle: 0)

Mirror Effect:

dart

SfLinearGauge(isMirrored: true)

多区间状态指示器：

dart

ranges: [
  LinearGaugeRange(startValue: 0, endValue: 30, color: Colors.red),
  LinearGaugeRange(startValue: 30, endValue: 70, color: Colors.yellow),
  LinearGaugeRange(startValue: 70, endValue: 100, color: Colors.green),
]

渐变样式：

dart

axisTrackStyle: LinearAxisTrackStyle(
  gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
)

垂直方向：

dart

SfLinearGauge(
  orientation: LinearGaugeOrientation.vertical,
  barPointers: [LinearBarPointer(value: 75)],
)

自定义角度（半圆形）：

dart

RadialAxis(startAngle: 180, endAngle: 0)

镜像效果：

dart

SfLinearGauge(isMirrored: true)

Key Properties

核心属性

SfLinearGauge Essential Properties

SfLinearGauge核心属性

```
minimum
```
- Minimum value of the axis (default: 0)
```
maximum
```
- Maximum value of the axis (default: 100)
```
interval
```
- Interval between axis labels
```
orientation
```
- Horizontal or vertical orientation
```
isMirrored
```
- Mirror the gauge elements
```
isAxisInversed
```
- Reverse axis direction
```
axisTrackStyle
```
- Styling for axis track (color, thickness, gradient, borders)
```
axisTrackExtent
```
- Extend axis track at both ends
```
showAxisTrack
```
- Show/hide axis track
```
showLabels
```
- Show/hide axis labels
```
showTicks
```
- Show/hide tick marks
```
labelPosition
```
- Inside or outside label placement
```
tickPosition
```
- Inside or outside tick placement
```
labelOffset
```
- Distance between ticks and labels
```
labelFormatterCallback
```
- Custom label formatting
```
ranges
```
- List of LinearGaugeRange for colored segments
```
markerPointers
```
- List of shape or widget pointers
```
barPointers
```
- List of bar pointers (progress style)
```
animationDuration
```
- Animation duration in milliseconds
```
onGenerateLabels
```
- Custom label generation callback
```
valueToFactorCallback
```
- Custom scale conversion

```
minimum
```
- 坐标轴最小值（默认：0）
```
maximum
```
- 坐标轴最大值（默认：100）
```
interval
```
- 坐标轴标签间隔
```
orientation
```
- 水平或垂直方向
```
isMirrored
```
- 镜像仪表元素
```
isAxisInversed
```
- 反转坐标轴方向
```
axisTrackStyle
```
- 坐标轴轨道样式（颜色、厚度、渐变、边框）
```
axisTrackExtent
```
- 坐标轴轨道两端延伸长度
```
showAxisTrack
```
- 显示/隐藏坐标轴轨道
```
showLabels
```
- 显示/隐藏坐标轴标签
```
showTicks
```
- 显示/隐藏刻度线
```
labelPosition
```
- 标签放置位置（内侧/外侧）
```
tickPosition
```
- 刻度放置位置（内侧/外侧）
```
labelOffset
```
- 刻度与标签的间距
```
labelFormatterCallback
```
- 自定义标签格式化回调
```
ranges
```
- LinearGaugeRange类型的彩色区间列表
```
markerPointers
```
- 形状或Widget指针列表
```
barPointers
```
- 条形指针列表（进度样式）
```
animationDuration
```
- 动画时长（毫秒）
```
onGenerateLabels
```
- 自定义标签生成回调
```
valueToFactorCallback
```
- 自定义刻度转换回调

SfRadialGauge Essential Properties

SfRadialGauge核心属性

```
title
```
- GaugeTitle for gauge heading
```
backgroundColor
```
- Background color for gauge
```
axes
```
- List of RadialAxis (supports multiple)
```
enableLoadingAnimation
```
- Show loading animation
```
animationDuration
```
- Animation duration in milliseconds

```
title
```
- 仪表标题GaugeTitle
```
backgroundColor
```
- 仪表背景色
```
axes
```
- RadialAxis列表（支持多轴）
```
enableLoadingAnimation
```
- 显示加载动画
```
animationDuration
```
- 动画时长（毫秒）

RadialAxis Essential Properties

RadialAxis核心属性

```
minimum
```
- Minimum value of axis (default: 0)
```
maximum
```
- Maximum value of axis (default: 100)
```
interval
```
- Interval between labels
```
startAngle
```
- Starting angle of axis (default: 270)
```
endAngle
```
- Ending angle of axis (default: 270)
```
radiusFactor
```
- Radius size factor (0-1)
```
centerX
```
- Horizontal center position (0-1)
```
centerY
```
- Vertical center position (0-1)
```
isInversed
```
- Reverse axis direction
```
canScaleToFit
```
- Position axis based on angles
```
canRotateLabels
```
- Rotate labels based on angle
```
showFirstLabel
```
- Show/hide first label
```
showLastLabel
```
- Show/hide last label
```
maximumLabels
```
- Max labels per 100 logical pixels
```
axisLineStyle
```
- AxisLineStyle for axis line
```
showAxisLine
```
- Show/hide axis line
```
showLabels
```
- Show/hide labels
```
showTicks
```
- Show/hide ticks
```
axisLabelStyle
```
- GaugeTextStyle for labels
```
labelFormat
```
- Label format string (prefix/suffix)
```
numberFormat
```
- NumberFormat for globalization
```
labelsPosition
```
- Inside or outside placement
```
ticksPosition
```
- Inside or outside placement
```
majorTickStyle
```
- MajorTickStyle customization
```
minorTickStyle
```
- MinorTickStyle customization
```
minorTicksPerInterval
```
- Minor ticks count
```
tickOffset
```
- Distance from axis
```
labelOffset
```
- Distance from ticks
```
offsetUnit
```
- Logical pixels or factor
```
backgroundImage
```
- AssetImage for axis background
```
ranges
```
- List of GaugeRange
```
pointers
```
- List of GaugePointer
```
annotations
```
- List of GaugeAnnotation
```
onLabelCreated
```
- Label creation callback
```
onAxisTapped
```
- Axis tap callback
```
onCreateAxisRenderer
```
- Custom renderer callback

```
minimum
```
- 坐标轴最小值（默认：0）
```
maximum
```
- 坐标轴最大值（默认：100）
```
interval
```
- 标签间隔
```
startAngle
```
- 坐标轴起始角度（默认：270）
```
endAngle
```
- 坐标轴结束角度（默认：270）
```
radiusFactor
```
- 半径尺寸系数（0-1）
```
centerX
```
- 水平中心位置（0-1）
```
centerY
```
- 垂直中心位置（0-1）
```
isInversed
```
- 反转坐标轴方向
```
canScaleToFit
```
- 根据角度调整坐标轴位置
```
canRotateLabels
```
- 根据角度旋转标签
```
showFirstLabel
```
- 显示/隐藏第一个标签
```
showLastLabel
```
- 显示/隐藏最后一个标签
```
maximumLabels
```
- 每100逻辑像素最多显示标签数
```
axisLineStyle
```
- 坐标轴线条样式AxisLineStyle
```
showAxisLine
```
- 显示/隐藏坐标轴线条
```
showLabels
```
- 显示/隐藏标签
```
showTicks
```
- 显示/隐藏刻度
```
axisLabelStyle
```
- 标签文本样式GaugeTextStyle
```
labelFormat
```
- 标签格式字符串（前缀/后缀）
```
numberFormat
```
- 国际化NumberFormat配置
```
labelsPosition
```
- 标签放置位置（内侧/外侧）
```
ticksPosition
```
- 刻度放置位置（内侧/外侧）
```
majorTickStyle
```
- 主刻度样式自定义
```
minorTickStyle
```
- 次刻度样式自定义
```
minorTicksPerInterval
```
- 每个间隔的次刻度数量
```
tickOffset
```
- 刻度与坐标轴的间距
```
labelOffset
```
- 标签与刻度的间距
```
offsetUnit
```
- 逻辑像素或系数
```
backgroundImage
```
- 坐标轴背景图片AssetImage
```
ranges
```
- GaugeRange列表
```
pointers
```
- GaugePointer列表
```
annotations
```
- GaugeAnnotation列表
```
onLabelCreated
```
- 标签创建回调
```
onAxisTapped
```
- 坐标轴点击回调
```
onCreateAxisRenderer
```
- 自定义渲染器回调

LinearGauge Range Properties

LinearGauge区间属性

```
startValue
```
- Start value of range
```
endValue
```
- End value of range
```
color
```
- Range color
```
startWidth
```
- Starting width
```
endWidth
```
- Ending width
```
position
```
- Inside, outside, or cross
```
rangeShapeType
```
- Flat or curve shape

```
startValue
```
- 区间起始值
```
endValue
```
- 区间结束值
```
color
```
- 区间颜色
```
startWidth
```
- 区间起始宽度
```
endWidth
```
- 区间结束宽度
```
position
```
- 放置位置（内侧/外侧/居中）
```
rangeShapeType
```
- 形状（平直/弧形）

RadialGauge Range Properties

RadialGauge区间属性

```
startValue
```
- Start value of range
```
endValue
```
- End value of range
```
color
```
- Range color
```
startWidth
```
- Starting width
```
endWidth
```
- Ending width
```
gradient
```
- Gradient for range
```
rangeOffset
```
- Offset from axis
```
sizeUnit
```
- Logical pixels or factor
```
label
```
- Text label for range

```
startValue
```
- 区间起始值
```
endValue
```
- 区间结束值
```
color
```
- 区间颜色
```
startWidth
```
- 区间起始宽度
```
endWidth
```
- 区间结束宽度
```
gradient
```
- 区间渐变
```
rangeOffset
```
- 区间与坐标轴的偏移量
```
sizeUnit
```
- 逻辑像素或系数
```
label
```
- 区间文本标签

Pointer Properties (Common)

指针通用属性

```
value
```
- Pointer value
```
enableDragging
```
- Enable pointer dragging
```
enableAnimation
```
- Enable pointer animation
```
animationDuration
```
- Animation duration
```
animationType
```
- Animation curve type
```
onValueChangeStart
```
- Drag start callback
```
onValueChanging
```
- Drag progress callback
```
onValueChanged
```
- Value changed callback
```
onValueChangeEnd
```
- Drag end callback

```
value
```
- 指针数值
```
enableDragging
```
- 启用指针拖拽
```
enableAnimation
```
- 启用指针动画
```
animationDuration
```
- 动画时长
```
animationType
```
- 动画曲线类型
```
onValueChangeStart
```
- 拖拽开始回调
```
onValueChanging
```
- 拖拽过程回调
```
onValueChanged
```
- 数值变更回调
```
onValueChangeEnd
```
- 拖拽结束回调

Common Use Cases

常见使用场景

Progress Indicators - Use LinearBarPointer or RangePointer for progress tracking
Speedometer Dashboard - Use RadialGauge with NeedlePointer and ranges
Temperature Display - Use vertical LinearGauge or semi-circle RadialGauge
Battery Indicator - Use LinearGauge with mirror effect and ranges
Volume/Brightness Control - Use draggable LinearShapePointer
KPI Dashboard - Use multiple RadialGauges with annotations
Rating Display - Use RadialGauge with semi-circle and RangePointer
Fuel Gauge - Use RadialGauge with needle and color ranges
Loading Indicator - Use animated LinearBarPointer or RangePointer
Slider Alternative - Use interactive LinearGauge with draggable pointer

进度指示器 - 使用LinearBarPointer或RangePointer实现进度追踪
速度表仪表盘 - 使用带NeedlePointer和区间的RadialGauge实现
温度展示 - 使用垂直LinearGauge或半圆形RadialGauge实现
电量指示器 - 使用带镜像效果和区间的LinearGauge实现
音量/亮度控制 - 使用可拖拽的LinearShapePointer实现
KPI仪表盘 - 使用多个带注释的RadialGauge实现
评分展示 - 使用带半圆形和RangePointer的RadialGauge实现
燃油表 - 使用带指针和颜色区间的RadialGauge实现
加载指示器 - 使用带动画的LinearBarPointer或RangePointer实现
滑块替代方案 - 使用带可拖拽指针的交互式LinearGauge实现