syncfusion-angular-linear-gauge

用途

Syncfusion Angular Linear Gauge 用于在 Angular 应用中创建和自定义线性仪表组件，将测量值和指标显示在线性刻度上。它以水平或垂直条形展示数值，并配合范围、指针和标签，实现清晰的数据呈现。

主要能力

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

使用方式

安装与导入：通过 npm 包设置，导入 Linear Gauge 模块，并引入 CSS 主题。

快速开始示例：

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

常见模式：

温度仪表：使用范围显示冷/热区域，并用 Marker 指针显示当前温度。

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

交互式仪表：允许用户拖拽指针改变数值。

<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);
}

多指针：在同一刻度上比较多个值。

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

适用场景

需要在 Angular 界面中展示温度、压力、速度等标量测量值。
需要为不同数值区间设置彩色范围，并配合指针显示当前值。
需要多指针比较实际值与目标值。
需要拖拽指针实现用户输入或动态更新数值。
需要导出 PNG、PDF、SVG 或打印仪表。
需要国际化、RTL 或 WCAG 无障碍支持。

限制

资料未提供具体的收费、价格、平台兼容性、性能指标或效果保证。部分高级功能（如从 ej1 迁移到 ej2/ej3）的具体步骤需参考对应文档。

技能介绍

用途

主要能力

使用方式

适用场景

限制