用途
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 应用中展示线性数值的仪表盘、监控面板、性能指标可视化等场景。
限制
资料中未提供关于收费、价格、平台兼容性、具体效果或使用步骤的详细信息,暂未提供。