syncfusion-angular-linear-gauge

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Linear Gauge

实现Syncfusion Angular Linear Gauge

The Linear Gauge is a component used to visualize measurements and metrics on a linear scale. It displays values in a horizontal or vertical bar with ranges, pointers, and labels for clear data representation.

Linear Gauge是一个用于在线性刻度上可视化测量数据和指标的组件。它通过水平或垂直条形图展示数值，并配有量程、指针和标签，实现清晰的数据呈现。

When to Use This Skill

何时使用此技能

Creating a gauge component: Display scalar values on a linear scale
Measurement interfaces: Show temperature, pressure, speed, or other metrics
Adding ranges: Define colored zones for different value ranges
Configuring pointers: Show multiple values with different pointer styles
Customizing appearance: Modify colors, fonts, backgrounds, and animations
Handling interactions: Add click, drag, or hover events
Adding annotations: Include text or images to enhance the gauge
Exporting and printing: Generate PNG, PDF, or SVG outputs
International support: Enable i18n and RTL support
Accessibility: Ensure WCAG compliance for accessible interfaces

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

Documentation and Navigation Guide

文档与导航指南

Choose your reference based on what you need to accomplish:

根据你的需求选择对应的参考文档：

API Reference

API参考

📄 Read: references/api-reference.md

📄 阅读：references/api-reference.md

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and npm package setup
Importing Linear Gauge module
Creating your first gauge component
CSS theme imports
Basic configuration

📄 阅读：references/getting-started.md

安装与npm包配置
导入Linear Gauge模块
创建首个仪表组件
CSS主题导入
基础配置

Configuring Axes and Scales

配置轴与刻度

📄 Read: references/axis-and-scales.md

Axis properties and range setup
Scale configuration and limits
Major and minor tick marks
Label formatting and positioning
Multiple axes on a single gauge

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

轴属性与量程设置
刻度配置与限制
主刻度与次刻度标记
标签格式化与定位
单个仪表上配置多轴

Adding Ranges and Pointers

添加量程与指针

📄 Read: references/ranges-and-pointers.md

Creating and styling ranges
Range animations and offsets
Pointer types (marker and bar)
Pointer animations and transitions
Drag-enabled pointers for user input
Multiple pointers on one gauge

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

创建并设置量程样式
量程动画与偏移
指针类型（标记型和条形型）
指针动画与过渡效果
支持拖拽的指针（用于用户输入）
单个仪表上配置多指针

Customization and Appearance

自定义与外观设置

📄 Read: references/customization-and-appearance.md

Container styling and sizing
Color schemes and theme application
Font and label customization
Borders and shadow effects
Background and gradient styling
Custom label templates

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

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

Interaction and Events

交互与事件

📄 Read: references/interaction-and-events.md

Mouse event handling
Click, hover, and drag interactions
Event callbacks and listeners
Form integration patterns
Dynamic value updates from user input

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

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

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Print and export functionality (PNG, PDF, SVG)
Annotations for additional information
Animation configuration and timing
Internationalization (i18n) setup
Right-to-left (RTL) text support
WCAG accessibility compliance
Migrating from ej1 to ej2/ej3

📄 阅读：references/advanced-features.md

打印与导出功能（PNG、PDF、SVG）
用于补充信息的注释
动画配置与时长设置
国际化（i18n）配置
从右到左（RTL）文本支持
WCAG无障碍合规性
从ej1迁移至ej2/ej3

Responsive Design and Dimensions

响应式设计与尺寸

📄 Read: references/dimensions-and-responsive.md

Container sizing and responsive layouts
Dimension properties
Print layout considerations
Mobile-friendly gauge design

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

容器尺寸与响应式布局
尺寸属性
打印布局注意事项
移动端友好的仪表设计

Quick Start

快速开始

typescript

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

typescript

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

Common Patterns

常见模式

Pattern 1: Temperature Gauge

模式1：温度仪表

Display current temperature with hot/cold zones.

typescript

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

显示当前温度，并配有冷热区域。

typescript

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

Pattern 2: Interactive Gauge

模式2：交互式仪表

Allow users to drag the pointer to change values.

typescript

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

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

typescript

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

Pattern 3: Multiple Pointers

模式3：多指针

Compare multiple values on the same scale.

typescript

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

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

typescript

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

Key Props and Configuration

关键属性与配置

Property	Type	Purpose
`orientation`	'Horizontal' \| 'Vertical'	Direction of the gauge
`container.width`	number	Gauge width (e.g., '100', '300')
`container.height`	number	Gauge height (e.g., '150')
`axes[].minimum`	number	Minimum value on scale
`axes[].maximum`	number	Maximum value on scale
`ranges[].start`	number	Range start value
`ranges[].end`	number	Range end value
`ranges[].color`	string	Range color (hex or named)
`pointers[].value`	number	Current pointer value
`pointers[].type`	'Bar' \| 'Marker'	Pointer visual style
`animationDuration`	number	Enable pointer animations, if greater than 0
`print()`	method	Export as PNG/PDF

属性	类型	用途
`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()`	方法	导出为PNG/PDF格式