SuperAPI AI 工具集

syncfusion-aspnetcore-lineargauge

前端与建站

查看项目

更新于 10-16 02:01

技能介绍

用途

Syncfusion Linear Gauge 组件用于以线性方式可视化轴上的数值。当需要展示温度、速度、性能指标等数值,或创建带可拖拽指针的交互式仪表、在线性刻度上可视化范围与阈值、向仪表添加注释和自定义元素、实现实时数据更新的仪表盘仪表,以及构建温度计式或进度指示器组件时,可使用此技能。

主要能力

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

使用方式

以下是一个最小 Linear Gauge 实现示例(ASP.NET Core Tag Helper):

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

常见模式包括:

  • 温度显示:垂直方向,温度计容器,范围颜色为蓝(冷)、绿(正常)、红(热),单个条形指针表示当前温度。
  • 进度指示器:水平方向,百分比值,0-100 单一范围,条形指针显示完成百分比。
  • 仪表盘指标:水平方向,多个范围,标记指针表示实际值与目标值,注释用于标签和备注。
  • 实时监控:绑定 ValueChange 事件,指针动画指定持续时间,悬停信息工具提示。

文档导航

  • 入门:安装与包设置、基本线性仪表实现、CSS 导入与主题配置、初始配置与渲染。
  • 仪表尺寸:容器大小与尺寸(像素 vs 百分比)、方向(水平/垂直)、尺寸配置、响应式行为与边距控制。
  • 范围与值:范围定义与颜色、多范围配置、值绑定与轴缩放、最小/最大值、范围样式与渐变颜色。
  • 指针与指示器:指针类型与样式(Marker、Bar)、标记形状(Circle、Rectangle、Triangle、Diamond、Image、Text)、动画与移动、多指针、指针样式与自定义。
  • 外观与样式:视觉自定义、容器类型(Normal、RoundedRectangle、Thermometer)、颜色与主题、标题样式、边框与刻度、标签自定义。
  • 交互与事件:点击事件与拖拽操作、值变化事件、动画完成事件、鼠标事件(down、move、up、leave)、工具提示渲染与处理。
  • 注释:添加文本和图像注释、定位注释(x、y 坐标)、Z-index 与分层、水平与垂直对齐、多个注释。
  • 高级功能:无障碍(WCAG 2.2、屏幕阅读器)、打印与导出功能、国际化(i18n)、API 方法与属性、RTL 支持。
  • 示例与用例:仪表盘仪表、速度指示器、温度显示、性能指标、真实世界模式与最佳实践。

适用场景

适用于需要在 ASP.NET Core 应用中展示线性数值的仪表盘、监控面板、性能指标可视化等场景。

限制

资料中未提供关于收费、价格、平台兼容性、具体效果或使用步骤的详细信息,暂未提供。