Back to Details

syncfusion-angular-range-navigator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Range Navigator

在Angular中实现Syncfusion Range Navigator

When to Use This Skill

适用场景

Use this skill when you need to:
  • Create a Range Navigator component from scratch in an Angular application
  • Set up data binding with local arrays or remote data sources
  • Configure date-time or numeric axes for different data types
  • Customize tooltips with formatted display and custom templates
  • Implement period selectors for quick date range selection
  • Add multiple series types (Area, Line, Spline, StepLine, etc.)
  • Enable lightweight mode for mobile and performance-optimized applications
  • Support RTL (Right-to-Left) layouts for international applications
  • Format axis labels and customize grid ticks
  • Export or print Range Navigator as images or PDFs
  • Ensure accessibility with keyboard navigation and ARIA attributes
  • Handle empty data points and edge cases gracefully
当你需要以下功能时可使用此技能：
  • 在Angular应用中从零开始创建Range Navigator组件
  • 设置本地数组或远程数据源的数据绑定
  • 为不同数据类型配置日期时间型或数值型轴
  • 自定义工具提示，支持格式化显示和自定义模板
  • 实现周期选择器以快速选择日期范围
  • 添加多种系列类型（Area、Line、Spline、StepLine等）
  • 启用轻量模式，适配移动端和性能优化场景
  • 支持RTL（从右到左）布局，适配国际化应用
  • 格式化轴标签并自定义网格刻度
  • 将Range Navigator导出或打印为图片或PDF
  • 确保无障碍性，支持键盘导航和ARIA属性
  • 优雅处理空数据点和边缘情况

Component Overview

组件概述

The Syncfusion Angular Range Navigator is a powerful data visualization component for browsing, selecting, and navigating through time-series data. It allows users to scroll and select ranges from large datasets and integrates seamlessly with other Syncfusion components like Chart and DataGrid. Designed for Angular 21+ with standalone architecture, it provides multiple axis types, series configurations, interactive tooltips, and comprehensive export/print capabilities.
Syncfusion Angular Range Navigator是一款强大的数据可视化组件，用于浏览、选择和导航时间序列数据。它允许用户滚动并从大型数据集中选择范围，还能与Chart、DataGrid等其他Syncfusion组件无缝集成。该组件专为Angular 21+的独立架构设计，提供多种轴类型、系列配置、交互式工具提示以及全面的导出/打印功能。

Key Capabilities

核心功能

  • Data Binding: Local arrays, remote data sources, JSON arrays
  • Axis Types: Numeric and DateTime axes with custom intervals
  • Series Types: Area, Line, Spline, StepLine, StepArea with automatic data mapping
  • Tooltips: Enable/disable, custom formatting, headers, HTML templates
  • Period Selector: Quick selection buttons (Day, Week, Month, Year, custom ranges)
  • Lightweight Mode: Optimized for mobile and performance-critical applications
  • Labels & Grid: Customizable axis labels, grid ticks, label formats
  • RTL Support: Full right-to-left text and layout support
  • Export/Print: PNG, SVG, PDF formats with high-quality output
  • Accessibility: WCAG compliance, keyboard navigation, ARIA attributes
  • 数据绑定：本地数组、远程数据源、JSON数组
  • 轴类型：数值型和DateTime轴，支持自定义间隔
  • 系列类型：Area、Line、Spline、StepLine、StepArea，支持自动数据映射
  • 工具提示：启用/禁用、自定义格式化、标题、HTML模板
  • 周期选择器：快速选择按钮（日、周、月、年、自定义范围）
  • 轻量模式：针对移动端和性能关键场景优化
  • 标签与网格：可自定义轴标签、网格刻度、标签格式
  • RTL支持：完整的从右到左文本和布局支持
  • 导出/打印：PNG、SVG、PDF格式，输出高质量内容
  • 无障碍性：符合WCAG标准、支持键盘导航、ARIA属性

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
  • Installation and package setup
  • Create your first Range Navigator
  • Basic component configuration with data binding
  • CSS and theme imports
  • Minimal working example
  • Module injection and service providers
📄 阅读：references/getting-started.md
  • 安装与包配置
  • 创建你的第一个Range Navigator
  • 带数据绑定的基础组件配置
  • CSS与主题导入
  • 最简运行示例
  • 模块注入与服务提供者

Axis Configuration & Types

轴配置与类型

📄 Read: references/axis-configuration.md
  • Numeric axis setup and configuration
  • DateTime axis implementation
  • Axis interval and range customization
  • Axis label formatting
  • Axis types comparison and selection guidance
  • Custom axis value mapping
📄 阅读：references/axis-configuration.md
  • 数值型轴的设置与配置
  • DateTime轴的实现
  • 轴间隔与范围自定义
  • 轴标签格式化
  • 轴类型对比与选择指南
  • 自定义轴值映射

Series Types & Data Binding

系列类型与数据绑定

📄 Read: references/series-types.md
  • Available series types (Area, Line, Spline, StepLine, StepArea)
  • Series data binding and xName/yName mapping
  • Multiple series configuration
  • Series color and style customization
  • Data source configuration (local and remote)
  • Empty point handling
📄 阅读：references/series-types.md
  • 可用系列类型（Area、Line、Spline、StepLine、StepArea）
  • 系列数据绑定与xName/yName映射
  • 多系列配置
  • 系列颜色与样式自定义
  • 数据源配置（本地与远程）
  • 空数据点处理

Tooltips & Interactivity

工具提示与交互性

📄 Read: references/tooltips-interactivity.md
  • Enable and configure tooltips
  • Tooltip formatting and headers
  • Tooltip templates with HTML
  • Custom tooltip content
  • Tooltip positioning and behavior
  • Range selection events and handling
📄 阅读：references/tooltips-interactivity.md
  • 启用并配置工具提示
  • 工具提示格式化与标题
  • 带HTML的工具提示模板
  • 自定义工具提示内容
  • 工具提示定位与行为
  • 范围选择事件与处理

Period Selector & Range Selection

周期选择器与范围选择

📄 Read: references/period-selector.md
  • Period selector configuration
  • Built-in period options (Day, Week, Month, Year)
  • Custom period ranges
  • Period selector styling
  • Range selection programmatically
  • Event handling for selection changes
📄 阅读：references/period-selector.md
  • 周期选择器配置
  • 内置周期选项（日、周、月、年）
  • 自定义周期范围
  • 周期选择器样式
  • 程序化范围选择
  • 选择变更的事件处理

Labels, Ticks & Formatting

标签、刻度与格式化

📄 Read: references/labels-formatting.md
  • Axis label customization and formatting
  • Label format strings and custom functions
  • Grid tick configuration and styling
  • Label positioning and rotation
  • Date and number format customization
📄 阅读：references/labels-formatting.md
  • 轴标签自定义与格式化
  • 标签格式字符串与自定义函数
  • 网格刻度配置与样式
  • 标签定位与旋转
  • 日期与数字格式自定义

Lightweight Mode & Performance

轻量模式与性能

📄 Read: references/lightweight-mode.md
  • Enable lightweight mode for mobile
  • Performance considerations and optimization
  • Mobile device optimization techniques
  • Lightweight mode limitations and features
  • When to use lightweight mode vs standard mode
📄 阅读：references/lightweight-mode.md
  • 为移动端启用轻量模式
  • 性能考量与优化
  • 移动设备优化技巧
  • 轻量模式的限制与特性
  • 何时使用轻量模式 vs 标准模式

RTL & Internationalization

RTL与国际化

📄 Read: references/rtl-internationalization.md
  • RTL (Right-to-Left) support and configuration
  • Component behavior in RTL mode
  • Locale and number formatting
  • Language-specific configurations
  • Multilingual support patterns
📄 阅读：references/rtl-internationalization.md
  • RTL（从右到左）支持与配置
  • RTL模式下的组件行为
  • 区域设置与数字格式化
  • 特定语言配置
  • 多语言支持模式

Print, Export & Accessibility

打印、导出与无障碍性

📄 Read: references/print-export-accessibility.md
  • Export Range Navigator as PNG, SVG, PDF
  • Print functionality configuration
  • WCAG 2.1 compliance guidelines
  • Keyboard navigation support
  • ARIA attributes and labels
  • Screen reader optimization
📄 阅读：references/print-export-accessibility.md
  • 将Range Navigator导出为PNG、SVG、PDF
  • 打印功能配置
  • WCAG 2.1合规指南
  • 键盘导航支持
  • ARIA属性与标签
  • 屏幕阅读器优化

Quick Start Example

快速入门示例

Here's a minimal example to get you started:
typescript
import { Component } from '@angular/core';
import { RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RangeNavigatorModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      id="rn-container" 
      [tooltip]="{ enable: true }"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData" 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AppComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 21 },
    { date: new Date(2023, 1, 1), value: 24 },
    { date: new Date(2023, 2, 1), value: 36 },
    { date: new Date(2023, 3, 1), value: 38 }
  ];
}
以下是一个最简入门示例：
typescript
import { Component } from '@angular/core';
import { RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RangeNavigatorModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      id="rn-container" 
      [tooltip]="{ enable: true }"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData" 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AppComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 21 },
    { date: new Date(2023, 1, 1), value: 24 },
    { date: new Date(2023, 2, 1), value: 36 },
    { date: new Date(2023, 3, 1), value: 38 }
  ];
}

Common Patterns

常见模式

Pattern 1: DateTime Range Navigator with Area Series

模式1：带Area系列的DateTime Range Navigator

When user needs to browse time-series data with date range selection:
typescript
@Component({
  template: `
    <ejs-rangenavigator 
      id="range-navigator"
      [dataSource]="timeSeries" 
      valueType="DateTime"
      [intervalType]="'Months'">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class TimeSeriesComponent {
  timeSeries = [
    { date: new Date(2020, 0, 1), value: 40 },
    { date: new Date(2020, 1, 1), value: 50 },
    { date: new Date(2020, 2, 1), value: 60 }
  ];
}
当用户需要浏览时间序列数据并选择日期范围时：
typescript
@Component({
  template: `
    <ejs-rangenavigator 
      id="range-navigator"
      [dataSource]="timeSeries" 
      valueType="DateTime"
      [intervalType]="'Months'">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class TimeSeriesComponent {
  timeSeries = [
    { date: new Date(2020, 0, 1), value: 40 },
    { date: new Date(2020, 1, 1), value: 50 },
    { date: new Date(2020, 2, 1), value: 60 }
  ];
}

Pattern 2: Range Navigator with Period Selector

模式2：带周期选择器的Range Navigator

When user needs quick selection buttons for common time periods:
typescript
@Component({
imports: [
         ChartModule, RangeNavigatorModule
    ],

providers: [ AreaSeriesService, DateTimeService, PeriodSelectorService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [periodSelectorSettings]='periodSelectorConfig'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='close' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class PeriodSelectorComponent {
  chartData = [...]; // time series data

  periodSelectorConfig = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: 'MMM dd, yyyy'
  };
}
当用户需要快速选择常用时间段的按钮时：
typescript
@Component({
imports: [
         ChartModule, RangeNavigatorModule
    ],

providers: [ AreaSeriesService, DateTimeService, PeriodSelectorService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [periodSelectorSettings]='periodSelectorConfig'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='close' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class PeriodSelectorComponent {
  chartData = [...]; // time series data

  periodSelectorConfig = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: 'MMM dd, yyyy'
  };
}

Pattern 3: Lightweight Range Navigator for Mobile

模式3：移动端轻量Range Navigator

When user needs optimized Range Navigator for mobile devices:
typescript
@Component({
  template: `
    <ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [labelFormat]='labelFormat'[dataSource]='mobileData' xName='x' yName='y'>
    </ejs-rangenavigator>
  `
})
export class MobileOptimizedComponent {
  mobileData = [...]; // optimized dataset for mobile
}
当用户需要针对移动端优化的Range Navigator时：
typescript
@Component({
  template: `
    <ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [labelFormat]='labelFormat'[dataSource]='mobileData' xName='x' yName='y'>
    </ejs-rangenavigator>
  `
})
export class MobileOptimizedComponent {
  mobileData = [...]; // optimized dataset for mobile
}

Pattern 4: Numeric Axis Range Navigator

模式4：数值型轴Range Navigator

When user needs to browse numeric data ranges:
typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0">
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class AppComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
}
当用户需要浏览数值数据范围时：
typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0">
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class AppComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
}

Pattern 5: Range Navigator with Custom Tooltip

模式5：带自定义工具提示的Range Navigator

When user needs formatted, custom tooltip display:
typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0"
        [tooltip]='tooltipSettings'>
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class CustomTooltipComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
  tooltipSettings = {
    enable: true,
    template: '<div>${value}</div>',
    header: 'Stock Price'
  };
}
当用户需要格式化的自定义工具提示显示时：
typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0"
        [tooltip]='tooltipSettings'>
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class CustomTooltipComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
  tooltipSettings = {
    enable: true,
    template: '<div>${value}</div>',
    header: 'Stock Price'
  };
}

Key Props Reference

核心属性参考

PropTypePurpose
valueType
stringAxis value type: 'Numeric' or 'DateTime' (default: 'DateTime')
dataSource
any[]Array of data objects
tooltip
TooltipSettingsTooltip settings (enable, format, template)
intervalType
stringAxis interval: 'Years', 'Months', 'Days', 'Hours', 'Minutes', 'Seconds'
intervals
numberInterval count for axis labels
labelFormat
stringFormat string for labels (e.g., 'MMM dd, yyyy')
lightWeight
booleanEnable lightweight mode (default: false)
enableRtl
booleanEnable RTL support (default: false)
series
RangeNavigatorSeries[]Series collection configuration
periodSelectorSettings
PeriodSelectorSettingsPeriod selector configuration
navigatorStyleSettings
NavigatorStyleSettingsStyle customization
gridLineSettings
GridLineSettingsGrid tick appearance
labelStyle
FontModelAxis label font and style
属性类型用途
valueType
string轴值类型：'Numeric'或'DateTime'（默认：'DateTime'）
dataSource
any[]数据对象数组
tooltip
TooltipSettings工具提示设置（启用、格式、模板）
intervalType
string轴间隔：'Years'、'Months'、'Days'、'Hours'、'Minutes'、'Seconds'
intervals
number轴标签的间隔数量
labelFormat
string标签格式字符串（例如：'MMM dd, yyyy'）
lightWeight
boolean启用轻量模式（默认：false）
enableRtl
boolean启用RTL支持（默认：false）
series
RangeNavigatorSeries[]系列集合配置
periodSelectorSettings
PeriodSelectorSettings周期选择器配置
navigatorStyleSettings
NavigatorStyleSettings样式自定义
gridLineSettings
GridLineSettings网格刻度外观
labelStyle
FontModel轴标签字体与样式

API Reference

API参考

A complete API reference for the Syncfusion Angular 
RangeNavigator
is available in the 
references
folder. It includes property anchors, method links, and event argument types that map to the official docs.
Read the API reference: references/api-reference.md
Syncfusion Angular 
RangeNavigator
的完整API参考位于
references
文件夹中，包含属性锚点、方法链接以及与官方文档对应的事件参数类型。
阅读API参考：references/api-reference.md

Common Use Cases

常见使用场景

  1. Stock Market Data: Browse historical stock prices with date range selection
  2. Sensor Data Monitoring: Navigate through time-series sensor readings and metrics
  3. Website Analytics: Select date ranges for traffic and user behavior analysis
  4. Financial Charts: Explore financial data with interactive period selection
  5. Application Performance: Monitor performance metrics over time with quick period selectors
  6. Sales Dashboard: Review sales data across different time periods
  7. Weather Data: Browse historical weather patterns with date navigation
  8. IoT Data Visualization: Navigate through large IoT sensor datasets efficiently
  1. 股票市场数据：浏览历史股价并选择日期范围
  2. 传感器数据监控：导航时间序列传感器读数与指标
  3. 网站分析：选择日期范围分析流量与用户行为
  4. 金融图表：结合交互式周期选择探索金融数据
  5. 应用性能：通过快速周期选择器监控一段时间内的性能指标
  6. 销售仪表盘：查看不同时间段的销售数据
  7. 天气数据：浏览历史天气模式并进行日期导航
  8. IoT数据可视化：高效导航大型IoT传感器数据集

Integration with Other Components

与其他组件的集成

The Range Navigator works seamlessly with other Syncfusion components:
  • Chart Component: Synchronize Range Navigator selection with main chart display
  • DataGrid: Filter grid data based on selected date range
  • Stock Chart: Combine with stock data visualization for enhanced analysis
For more information, visit the Syncfusion Angular Range Navigator Documentation.
Range Navigator可与其他Syncfusion组件无缝协作：
  • Chart组件：同步Range Navigator选择与主图表显示
  • DataGrid：根据选定日期范围过滤网格数据
  • Stock Chart：与股票数据可视化结合，增强分析能力
如需更多信息，请访问Syncfusion Angular Range Navigator官方文档。