syncfusion-angular-linear-gauge

实现 Syncfusion Angular Linear Gauge

Linear Gauge 是一种用于在线性刻度上可视化测量值和指标的组件。它通过带有范围、指针和标签的水平或垂直条形显示数值，以便清晰地呈现数据。

何时使用此技能

• 创建仪表组件：在线性刻度上显示标量值
• 测量界面：显示温度、压力、速度或其他指标
• 添加范围：为不同数值范围定义彩色区域
• 配置指针：使用不同的指针样式显示多个值
• 自定义外观：修改颜色、字体、背景和动画
• 处理交互：添加点击、拖动或悬停事件
• 添加注释：加入文本或图像以增强仪表效果
• 导出和打印：生成 PNG、PDF 或 SVG 输出
• 国际化支持：启用 i18n 和 RTL 支持
• 无障碍访问：确保符合 WCAG 标准，构建无障碍界面

文档和导航指南

根据要完成的任务选择参考文档：

API 参考

📄 阅读： references/api-reference.md

入门指南

📄 阅读： references/getting-started.md

• 安装和 npm 包设置
• 导入 Linear Gauge 模块
• 创建第一个仪表组件
• CSS 主题导入
• 基本配置

配置轴和刻度

📄 阅读： references/axis-and-scales.md

• 轴属性和范围设置
• 刻度配置和限制
• 主刻度线和次刻度线
• 标签格式和位置
• 在同一仪表上使用多个轴

添加范围和指针

📄 阅读： references/ranges-and-pointers.md

• 创建范围并设置样式
• 范围动画和偏移
• 指针类型（标记和条形）
• 指针动画和过渡效果
• 支持拖动的指针，用于用户输入
• 在一个仪表上使用多个指针

自定义和外观

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

• 容器样式和尺寸
• 配色方案和主题应用
• 字体和标签自定义
• 边框和阴影效果
• 背景和渐变样式
• 自定义标签模板

交互和事件

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

• 鼠标事件处理
• 点击、悬停和拖动交互
• 事件回调和监听器
• 表单集成模式
• 根据用户输入动态更新数值

高级功能

📄 阅读： references/advanced-features.md

• 打印和导出功能（PNG、PDF、SVG）
• 用于显示其他信息的注释
• 动画配置和计时
• 国际化（i18n）设置
• 从右到左（RTL）文本支持
• 符合 WCAG 无障碍访问标准
• 从 ej1 迁移到 ej2/ej3

响应式设计和尺寸

📄 阅读： references/dimensions-and-responsive.md

• 容器尺寸和响应式布局
• 尺寸属性
• 打印布局注意事项
• 适合移动设备的仪表设计

快速入门

import { Component, OnInit } from '@angular/core';
import { LinearGaugeAllModule } from '@syncfusion/ej2-angular-gauges';

@Component({
  selector: 'app-linear-gauge',
  template: `
    <ejs-lineargauge 
      [orientation]="'Horizontal'" 
      [container]="{ width: '100', height: '150' }">
      <e-axes>
        <e-axis [minimum]="0" [maximum]="100" 
                [majorTicks]="majorTicks" 
                [minorTicks]="minorTicks">
          <e-ranges>
            <e-range [start]="0" [end]="30" [color]="'#F6B53F'"></e-range>
            <e-range [start]="30" [end]="70" [color]="'#0DC451'"></e-range>
            <e-range [start]="70" [end]="100" [color]="'#F64C38'"></e-range>
          </e-ranges>
          <e-pointers>
            <e-pointer [value]="45" [type]="'Bar'"></e-pointer>
          </e-pointers>
        </e-axis>
      </e-axes>
    </ejs-lineargauge>
  `
})
export class LinearGaugeComponent implements OnInit {
  majorTicks = { interval: 20 };
  minorTicks = { interval: 5 };

  ngOnInit(): void {
    // Component initialized
  }
}

常见模式

模式 1：温度仪表

使用冷热区域显示当前温度。

<e-axis [minimum]="0" [maximum]="50">
  <e-ranges>
    <e-range [start]="0" [end]="15" [color]="'#3498db'" ></e-range>
    <e-range [start]="15" [end]="30" [color]="'#2ecc71'" ></e-range>
    <e-range [start]="30" [end]="50" [color]="'#e74c3c'" ></e-range>
  </e-ranges>
  <e-pointers>
    <e-pointer [value]="currentTemp" [type]="'Marker'"></e-pointer>
  </e-pointers>
</e-axis>

模式 2：交互式仪表

允许用户拖动指针来更改数值。

<e-pointer 
  [value]="gaugeValue" 
  [type]="'Bar'" 
  enableDrag=true
  [markerType]="'Circle'"
  (dragEnd)='dragEnd($event)'>
</e-pointer>

dragEnd(args: IPointerDragEventArgs): void {
  this.gaugeValue = event.currentValue;
  console.log('Gauge value changed to:', this.gaugeValue);
}

模式 3：多个指针

在同一刻度上比较多个数值。

<e-pointers>
  <e-pointer [value]="actualValue" [type]="'Bar'" [color]="'#0066cc'"></e-pointer>
  <e-pointer [value]="targetValue" [type]="'Marker'" [color]="'#ff6600'"></e-pointer>
</e-pointers>

关键属性和配置

属性	类型	用途
orientation	'Horizontal' | 'Vertical'	仪表的方向
container.width	number	仪表宽度（例如，'100'、'300'）
container.height	number	仪表高度（例如，'150'）
axes[].minimum	number	刻度上的最小值
axes[].maximum	number	刻度上的最大值
ranges[].start	number	范围起始值
ranges[].end	number	范围结束值
ranges[].color	string	范围颜色（十六进制或命名颜色）
pointers[].value	number	当前指针值
pointers[].type	'Bar' | 'Marker'	指针的视觉样式
animationDuration	number	大于 0 时启用指针动画
print()	method	导出为 PNG/PDF