syncfusion-aspnetcore-lineargauge

Name: syncfusion-aspnetcore-lineargauge
Author: syncfusion

github.com/syncfusion设计与 UI053 次安装2 周前更新

代码仓库

关于 syncfusion-aspnetcore-lineargauge

为 Syncfusion Linear Gauge 提供的实现指南，面向在 ASP.NET Core 项目中构建数值仪表的开发者。内容涵盖指针、范围、注释和交互，可用于温度、进度及监控指标展示。

主要功能

01Marker 与 Bar 指针
02数值范围着色
03文本、图像及 HTML 注释
04拖动、工具提示与事件
05指针动画与外观定制
06打印与图像导出

适用场景

01显示温度或速度
02构建进度指示器
03比较仪表盘中的实际值与目标值
04监控实时数值变化

安装

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

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-lineargauge

安装后在 Claude Code 中输入/syncfusion-aspnetcore-lineargauge确认已加载。

包含的文件

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

references/

advanced-features.md

annotations.md

api-reference.md

appearance-and-styling.md

examples-and-use-cases.md

gauge-dimensions.md

getting-started.md

interactions-and-events.md

pointers-and-indicators.md

ranges-and-values.md

详细介绍

实现 Syncfusion 线性仪表

何时使用此技能

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

以线性仪表格式显示数值（温度、速度、性能指标）
创建带有可拖动指针的交互式仪表
在刻度上可视化范围和阈值
为仪表添加注释和自定义元素
实现支持实时数据更新的仪表盘仪表
构建温度计样式或进度指示器组件

组件概览

线性仪表组件以线性方式可视化轴上的数值。所有元素均使用可缩放矢量图形（SVG）进行渲染。主要功能包括：

多个指针 - 支持 Marker 和 Bar 指针类型
范围高亮 - 定义颜色范围以突出显示数值区间
注释 - 在仪表任意位置添加文本、图像或 HTML 元素
交互功能 - 拖放指针、工具提示和事件
动画 - 加载时及数值变化时的平滑指针动画
自定义 - 颜色、主题、边框、刻度和容器类型（Normal、RoundedRectangle、Thermometer）
无障碍功能 - 符合 WCAG 2.2 标准，支持屏幕阅读器
打印和导出 - 打印和导出仪表图像

快速入门示例

以下是一个最简线性仪表实现：


<ejs-lineargauge id="linear" title="Temperature Gauge" orientation="Horizontal">
    <e-lineargauge-axes>
        <e-lineargauge-axis minimum="0" maximum="200">
            <e-lineargauge-ranges>
                <e-lineargauge-range start="0" end="50" color="blue"></e-lineargauge-range>
                <e-lineargauge-range start="50" end="150" color="green"></e-lineargauge-range>
                <e-lineargauge-range start="150" end="200" color="red"></e-lineargauge-range>
            </e-lineargauge-ranges>
            <e-lineargauge-pointers>
                <e-lineargauge-pointer value="75" type="Bar"></e-lineargauge-pointer>
            </e-lineargauge-pointers>
        </e-lineargauge-axis>
    </e-lineargauge-axes>
</ejs-lineargauge>