syncfusion-angular-range-navigator

实现 Syncfusion Angular Range Navigator

何时使用此技能

在以下情况下使用此技能：

• 从头开始创建 Range Navigator 组件，用于 Angular 应用
• 设置数据绑定，使用本地数组或远程数据源
• 配置日期时间轴或数值轴，以适配不同的数据类型
• 自定义工具提示，设置格式化显示和自定义模板
• 实现周期选择器，以便快速选择日期范围
• 添加多种系列类型（Area、Line、Spline、StepLine 等）
• 启用轻量模式，用于移动端和经过性能优化的应用
• **支持 RTL（从右到左）**布局，满足国际化应用的需求
• 设置轴标签格式并自定义网格刻度
• 将 Range Navigator 导出或打印为图像或 PDF
• 通过键盘导航和 ARIA 属性确保无障碍访问
• 妥善处理空数据点和边缘情况

---

组件概述

Syncfusion Angular Range Navigator 是一款功能强大的数据可视化组件，可用于浏览、选择和导航时间序列数据。它允许用户滚动浏览大型数据集并选择范围，还能与 Chart 和 DataGrid 等其他 Syncfusion 组件无缝集成。该组件专为采用独立架构的 Angular 21+ 设计，提供多种轴类型、系列配置、交互式工具提示，以及全面的导出和打印功能。

主要功能

• **数据绑定：**本地数组、远程数据源、JSON 数组
• **轴类型：**支持自定义间隔的数值轴和日期时间轴
• **系列类型：**Area、Line、Spline、StepLine、StepArea，并支持自动数据映射
• **工具提示：**启用或禁用、自定义格式、标题、HTML 模板
• **周期选择器：**快速选择按钮（Day、Week、Month、Year、自定义范围）
• **轻量模式：**针对移动端和对性能要求较高的应用进行优化
• **标签和网格：**可自定义轴标签、网格刻度和标签格式
• **RTL 支持：**全面支持从右到左的文本和布局
• **导出/打印：**支持 PNG、SVG、PDF 格式，并提供高质量输出
• **无障碍访问：**符合 WCAG 标准，支持键盘导航和 ARIA 属性

---

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和包配置
• 创建第一个 Range Navigator
• 使用数据绑定配置基本组件
• 导入 CSS 和主题
• 最小化可运行示例
• 模块注入和服务提供程序

轴配置和类型

📄 阅读： references/axis-configuration.md

• 数值轴设置和配置
• 日期时间轴的实现
• 轴间隔和范围自定义
• 轴标签格式设置
• 轴类型比较和选择指南
• 自定义轴值映射

系列类型和数据绑定

📄 阅读： references/series-types.md

• 可用的系列类型（Area、Line、Spline、StepLine、StepArea）
• 系列数据绑定以及 xName/yName 映射
• 多系列配置
• 系列颜色和样式自定义
• 数据源配置（本地和远程）
• 空数据点处理

工具提示和交互

📄 阅读： references/tooltips-interactivity.md

• 启用和配置工具提示
• 工具提示格式和标题
• 使用 HTML 创建工具提示模板
• 自定义工具提示内容
• 工具提示的位置和行为
• 范围选择事件及其处理

周期选择器和范围选择

📄 阅读： references/period-selector.md

• 周期选择器配置
• 内置周期选项（Day、Week、Month、Year）
• 自定义周期范围
• 周期选择器样式
• 通过编程方式选择范围
• 选择变更事件处理

标签、刻度与格式设置

📄 阅读： references/labels-formatting.md

• 自定义和设置坐标轴标签格式
• 标签格式字符串和自定义函数
• 网格刻度配置与样式设置
• 标签位置和旋转
• 日期和数字格式自定义

轻量模式与性能

📄 阅读： references/lightweight-mode.md

• 为移动设备启用轻量模式
• 性能注意事项与优化
• 移动设备优化技巧
• 轻量模式的限制与功能
• 何时使用轻量模式，何时使用标准模式

RTL 与国际化

📄 阅读： references/rtl-internationalization.md

• RTL（从右到左）支持与配置
• RTL 模式下的组件行为
• 区域设置与数字格式
• 特定语言的配置
• 多语言支持模式

打印、导出与无障碍访问

📄 阅读： references/print-export-accessibility.md

• 将 Range Navigator 导出为 PNG、SVG、PDF
• 打印功能配置
• WCAG 2.1 合规指南
• 键盘导航支持
• ARIA 属性与标签
• 屏幕阅读器优化

---

快速入门示例

以下是一个帮助你快速上手的最简示例：

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

---

常见模式

模式 1：带面积系列的 DateTime 范围导航器

当用户需要通过日期范围选择来浏览时间序列数据时：

@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 }
  ];
}

模式 2：带周期选择器的范围导航器

当用户需要快速选择常见时间段的按钮时：

@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'
  };
}

模式 3：适用于移动设备的轻量范围导航器

当用户需要针对移动设备优化的范围导航器时：

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

模式 4：数值轴范围导航器

当用户需要浏览数值数据范围时：

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

模式 5：带自定义工具提示的范围导航器

当用户需要经过格式化的自定义工具提示显示时：

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

---

关键属性参考

属性	类型	用途
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 参考

references 文件夹中提供了 Syncfusion Angular RangeNavigator 的完整 API 参考。其中包括属性锚点、方法链接和事件参数类型，可对应到官方文档。

阅读 API 参考：references/api-reference.md

常见用例

1. 股票市场数据： 浏览历史股价，并选择日期范围
2. 传感器数据监控： 浏览时间序列传感器读数和指标
3. 网站分析： 选择日期范围，分析流量和用户行为
4. 金融图表： 通过交互式时间段选择来探索金融数据
5. 应用性能： 使用快捷时间段选择器监控随时间变化的性能指标
6. 销售仪表板： 查看不同时间段的销售数据
7. 天气数据： 使用日期导航浏览历史天气模式
8. IoT 数据可视化： 高效浏览大型 IoT 传感器数据集

---

与其他组件集成

Range Navigator 可与其他 Syncfusion 组件无缝协作：

• 图表组件： 将 Range Navigator 的选择与主图表显示同步
• DataGrid： 根据所选日期范围筛选网格数据
• Stock Chart： 与股票数据可视化结合，增强分析效果

---

如需了解更多信息，请访问 Syncfusion Angular Range Navigator 文档。