syncfusion-react-range-navigator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Range Navigator

A comprehensive skill for implementing the Syncfusion React Range Navigator component - a powerful data visualization control that allows users to scroll and navigate through data with range selection capabilities. This component easily combines with other controls like Charts and Data Grids to create rich dashboards.

这是一份关于实现Syncfusion React Range Navigator组件的全面指南，该组件是一款功能强大的数据可视化控件，允许用户通过范围选择功能滚动和浏览数据。它可轻松与Charts、Data Grids等其他控件结合，创建丰富的仪表盘。

When to Use This Skill

何时使用该组件

Use this skill when you need to:

Install and set up the Range Navigator component in a React application
Implement range selection and navigation for time-series or numeric data
Display financial data, stock charts, or large datasets requiring navigation
Configure data binding with numeric, logarithmic, or DateTime value types
Customize series types (Line, Area, StepLine)
Add period selectors for predefined time intervals
Enable lightweight mode without chart data
Customize navigator appearance (thumbs, borders, regions)
Configure tooltips for range selection
Customize labels, grid lines, and tick lines
Enable accessibility features or RTL support
Export or print Range Navigator charts
Integrate Range Navigator with other chart components

当你需要以下功能时，可使用该组件：

在React应用中安装和设置Range Navigator组件
为时间序列或数值型数据实现范围选择与导航功能
展示金融数据、股票图表或需要导航的大型数据集
配置数值型、对数型或DateTime类型的数据绑定
自定义系列类型（折线图、面积图、阶梯折线图）
添加用于预定义时间间隔的周期选择器
启用无图表数据的轻量模式
自定义导航器外观（滑块、边框、区域）
配置范围选择的工具提示
自定义标签、网格线和刻度线
启用辅助功能或RTL支持
导出或打印Range Navigator图表
将Range Navigator与其他图表组件集成

Component Overview

组件概述

Range Navigator is a data visualization control that provides intuitive range selection and navigation capabilities for large datasets. It displays a condensed view of data with interactive sliders that allow users to select specific ranges. The component is particularly useful for:

Financial Data Visualization: Stock price analysis, trading data, market trends
Time-Series Navigation: Historical data exploration, date range selection
Large Dataset Filtering: Scroll through extensive data collections efficiently
Dashboard Integration: Combine with Charts, Grids, and other components

Key Features:

Multiple data source support (local and remote)
Interactive tooltip and animation
Lightweight mode for mobile devices
Period selector for custom time intervals
Multiple axis and series types
Export to image formats (PNG, JPEG, SVG, PDF)

Range Navigator是一款数据可视化控件，可为大型数据集提供直观的范围选择和导航功能。它以浓缩视图展示数据，并通过交互式滑块让用户选择特定范围。该组件尤其适用于：

金融数据可视化：股票价格分析、交易数据、市场趋势
时间序列导航：历史数据探索、日期范围选择
大型数据集过滤：高效浏览海量数据集合
仪表盘集成：与Charts、Grids及其他组件结合使用

核心特性：

支持多种数据源（本地和远程）
交互式工具提示与动画效果
适用于移动设备的轻量模式
用于自定义时间间隔的周期选择器
多轴与多系列类型
导出为多种图像格式（PNG、JPEG、SVG、PDF）

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api.md

Comprehensive API summary: props, methods, events, styling classes, and a short usage example. Links to official docs.

📄 阅读： references/api.md

全面的API汇总：属性、方法、事件、样式类及简短使用示例。包含官方文档链接。

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and dependencies (@syncfusion/ej2-react-charts package)
Setting up development environment (Vite/Create React App)
Adding CSS stylesheets and themes
Basic Range Navigator implementation
Module injection (AreaSeries, DateTime, RangeTooltip)
Populating with data (dataSource, xName, yName)
Enabling tooltip
Running your first application

📄 阅读： references/getting-started.md

安装与依赖（@syncfusion/ej2-react-charts包）
设置开发环境（Vite/Create React App）
添加CSS样式表与主题
基础Range Navigator实现
模块注入（AreaSeries、DateTime、RangeTooltip）
填充数据（dataSource、xName、yName）
启用工具提示
运行你的第一个应用

Data Binding and Value Types

数据绑定与值类型

📄 Read: references/data-binding.md

Numeric value type (default Double type)
Range configuration (minimum, maximum, interval)
Numeric label formatting (n1, n2, p1, c1, custom formats)
Logarithmic axis for magnitude data
Logarithmic range and base customization
DateTime value type for time-series data
DateTime interval types (Auto, Years, Quarter, Months, Weeks, Days, Hours, Minutes, Seconds)
DateTime label formatting
Complete format reference tables

📄 阅读： references/data-binding.md

数值型值类型（默认Double类型）
范围配置（最小值、最大值、间隔）
数值标签格式化（n1、n2、p1、c1、自定义格式）
用于量级数据的对数轴
对数范围与底数自定义
用于时间序列数据的DateTime值类型
DateTime间隔类型（Auto、Years、Quarter、Months、Weeks、Days、Hours、Minutes、Seconds）
DateTime标签格式化
完整的格式参考表

Series Types

系列类型

📄 Read: references/series-types.md

Line series (default, LineSeries module)
Area series (AreaSeries module)
StepLine series (StepLineSeries module)
Module injection for each series type
Configuration and implementation examples

📄 阅读： references/series-types.md

折线图系列（默认，LineSeries模块）
面积图系列（AreaSeries模块）
阶梯折线图系列（StepLineSeries模块）
各系列类型的模块注入
配置与实现示例

Customization

自定义配置

📄 Read: references/customization.md

Navigator appearance (navigatorStyleSettings)
Selected and unselected region colors
Thumb customization (Circle/Rectangle shapes, size, border, fill)
Border customization (width, color)
Deferred update for performance optimization
Allow snapping for precise selection
Animation duration control

📄 阅读： references/customization.md

导航器外观（navigatorStyleSettings）
选中与未选中区域颜色
滑块自定义（圆形/矩形形状、尺寸、边框、填充色）
边框自定义（宽度、颜色）
延迟更新以优化性能
允许对齐以实现精确选择
动画时长控制

Period Selector

周期选择器

📄 Read: references/period-selector.md

Configuring predefined time periods
Period array (interval, text, intervalType)
Module injection (PeriodSelector)
Positioning (Top or Bottom)
Height customization
Disabling range selector (period selector only mode)
Interval types (Auto, Years, Quarter, Months, Weeks, Days, Hours, Minutes, Seconds)

📄 阅读： references/period-selector.md

配置预定义时间段
周期数组（interval、text、intervalType）
模块注入（PeriodSelector）
位置设置（顶部或底部）
高度自定义
禁用范围选择器（仅周期选择器模式）
间隔类型（Auto、Years、Quarter、Months、Weeks、Days、Hours、Minutes、Seconds）

Lightweight Mode

轻量模式

📄 Read: references/lightweight.md

Lightweight Range Navigator without chart data
When to use lightweight mode
Mobile-friendly implementation
Basic configuration

📄 阅读： references/lightweight.md

无图表数据的轻量Range Navigator
何时使用轻量模式
移动端友好的实现
基础配置

Tooltip

工具提示

📄 Read: references/tooltip.md

Enabling and disabling tooltip
Tooltip customization (fill, opacity, textStyle)
Label format for tooltips
Date and time format options
Complete format reference table

📄 阅读： references/tooltip.md

启用与禁用工具提示
工具提示自定义（填充色、透明度、文本样式）
工具提示的标签格式
日期与时间格式选项
完整的格式参考表

Labels

Grid Lines and Tick Lines

网格线与刻度线

📄 Read: references/grid-and-tick.md

Grid line customization (majorGridLines)
Grid line width, color, and dashArray
Tick line customization (majorTickLines)
Tick line width, color, and dashArray
Configuration examples

📄 阅读： references/grid-and-tick.md

网格线自定义（majorGridLines）
网格线宽度、颜色与dashArray
刻度线自定义（majorTickLines）
刻度线宽度、颜色与dashArray
配置示例

Accessibility

辅助功能

📄 Read: references/accessibility.md

Keyboard navigation support
Screen reader compatibility
WCAG 2.0 compliance
Accessibility features and best practices

📄 阅读： references/accessibility.md

键盘导航支持
屏幕阅读器兼容性
WCAG 2.0合规性
辅助功能与最佳实践

Right-to-Left (RTL) Support

从右到左（RTL）支持

📄 Read: references/rtl.md

Enabling RTL mode (enableRtl property)
RTL layout behavior
Implementation examples

📄 阅读： references/rtl.md

启用RTL模式（enableRtl属性）
RTL布局行为
实现示例

Export and Print

导出与打印

📄 Read: references/export-print.md

Export to image formats (PNG, JPEG, SVG, PDF)
Print functionality
Export/print method usage
Configuration options

📄 阅读： references/export-print.md

导出为图像格式（PNG、JPEG、SVG、PDF）
打印功能
导出/打印方法使用
配置选项

Quick Start Example

快速入门示例

tsx

import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

// Register your Syncfusion license key
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_LICENSE_KEY');

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];

  return (
    <RangeNavigatorComponent
      id="rangeNavigator"
      valueType="DateTime"
      value={[new Date(2018, 1, 1), new Date(2018, 4, 1)]}
      tooltip={{ enable: true }}
    >
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"
        />
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

tsx

import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

// Register your Syncfusion license key
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_LICENSE_KEY');

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];

  return (
    <RangeNavigatorComponent
      id="rangeNavigator"
      valueType="DateTime"
      value={[new Date(2018, 1, 1), new Date(2018, 4, 1)]}
      tooltip={{ enable: true }}
    >
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"
        />
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Common Patterns

常见模式

Pattern 1: Time-Series Data Navigation

模式1：时间序列数据导航

When user needs: Navigate through time-series data with date range selection

Implementation:

tsx

import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];
  return (
    <RangeNavigatorComponent
      valueType="DateTime"
      intervalType="Months"
      labelFormat="MMM"
      value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
      tooltip={{ enable: true, displayMode: 'Always' }}>
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"/>
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  )
}

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

适用场景： 通过日期范围选择浏览时间序列数据

实现代码：

tsx

import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];
  return (
    <RangeNavigatorComponent
      valueType="DateTime"
      intervalType="Months"
      labelFormat="MMM"
      value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
      tooltip={{ enable: true, displayMode: 'Always' }}>
      <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"/>
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  )
}

export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Pattern 2: Financial Data with Period Selector

模式2：带周期选择器的金融数据

When user needs: Stock chart navigation with predefined time periods (1M, 3M, 6M, YTD, 1Y)

Implementation:

tsx

import * as React from 'react';
import {
  RangeNavigatorComponent,
  AreaSeries,
  DateTime,
  RangeTooltip,
  PeriodSelector,
  Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective,
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];
  return (
    <RangeNavigatorComponent
      valueType="DateTime"
      value={[new Date(2023, 0, 1), new Date(2023, 11, 31)]}
      periodSelectorSettings={{
        periods: [
          { intervalType: 'Months', interval: 1, text: '1M' },
          { intervalType: 'Months', interval: 3, text: '3M' },
          { intervalType: 'Months', interval: 6, text: '6M' },
          { intervalType: 'Years', interval: 1, text: '1Y' },
          { text: 'YTD' },
        ],
        position: 'Top',
      }}
    >
      <Inject
        services={[
          AreaSeries,
          DateTime,
          RangeTooltip,
          PeriodSelector,
        ]}
      />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"
        />
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

适用场景： 股票图表导航，支持预定义时间段（1个月、3个月、6个月、年初至今、1年）

实现代码：

tsx

import * as React from 'react';
import {
  RangeNavigatorComponent,
  AreaSeries,
  DateTime,
  RangeTooltip,
  PeriodSelector,
  Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective,
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [
    { x: new Date(2018, 0, 1), y: 35 },
    { x: new Date(2018, 1, 1), y: 28 },
    { x: new Date(2018, 2, 1), y: 34 },
    { x: new Date(2018, 3, 1), y: 32 },
    { x: new Date(2018, 4, 1), y: 40 },
    { x: new Date(2018, 5, 1), y: 42 },
    { x: new Date(2018, 6, 1), y: 38 }
  ];
  return (
    <RangeNavigatorComponent
      valueType="DateTime"
      value={[new Date(2023, 0, 1), new Date(2023, 11, 31)]}
      periodSelectorSettings={{
        periods: [
          { intervalType: 'Months', interval: 1, text: '1M' },
          { intervalType: 'Months', interval: 3, text: '3M' },
          { intervalType: 'Months', interval: 6, text: '6M' },
          { intervalType: 'Years', interval: 1, text: '1Y' },
          { text: 'YTD' },
        ],
        position: 'Top',
      }}
    >
      <Inject
        services={[
          AreaSeries,
          DateTime,
          RangeTooltip,
          PeriodSelector,
        ]}
      />
      <RangenavigatorSeriesCollectionDirective>
        <RangenavigatorSeriesDirective
          dataSource={data}
          xName="x"
          yName="y"
          type="Area"
        />
      </RangenavigatorSeriesCollectionDirective>
    </RangeNavigatorComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Pattern 3: Custom Styling and Appearance

模式3：自定义样式与外观

When user needs: Customize navigator colors, thumbs, and borders

Implementation:

tsx

<RangeNavigatorComponent
  navigatorStyleSettings={{
    selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
    unselectedRegionColor: 'transparent',
    thumb: {
      type: 'Circle',
      fill: '#2196F3',
      border: { width: 2, color: '#ffffff' },
      height: 20,
      width: 20
    }
  }}
  navigatorBorder={{ width: 2, color: '#2196F3' }}
>
  {/* Series configuration */}
</RangeNavigatorComponent>

适用场景： 自定义导航器颜色、滑块与边框

实现代码：

tsx

<RangeNavigatorComponent
  navigatorStyleSettings={{
    selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
    unselectedRegionColor: 'transparent',
    thumb: {
      type: 'Circle',
      fill: '#2196F3',
      border: { width: 2, color: '#ffffff' },
      height: 20,
      width: 20
    }
  }}
  navigatorBorder={{ width: 2, color: '#2196F3' }}
>
  {/* Series configuration */}
</RangeNavigatorComponent>

Pattern 4: Lightweight Mode for Mobile

模式4：移动端轻量模式

When user needs: Simple range selector without chart data for mobile devices

Implementation:

tsx

<RangeNavigatorComponent
  valueType="DateTime"
  value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
  intervalType="Months"
>
  <Inject services={[DateTime]} />
  {/* No series - lightweight mode */}
</RangeNavigatorComponent>

适用场景： 移动端应用中无需图表数据的简单范围选择器

实现代码：

tsx

<RangeNavigatorComponent
  valueType="DateTime"
  value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
  intervalType="Months"
>
  <Inject services={[DateTime]} />
  {/* No series - lightweight mode */}
</RangeNavigatorComponent>

Pattern 5: Logarithmic Scale for Large Ranges

模式5：大范围对数刻度

When user needs: Handle data with values spanning multiple orders of magnitude

Implementation:

tsx

import { RangeNavigatorComponent, LineSeries, Logarithmic, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

<RangeNavigatorComponent
  valueType="Logarithmic"
  logBase={10}
  minimum={100}
  maximum={100000}
  interval={1}
>
  <Inject services={[LineSeries, Logarithmic]} />
  <RangenavigatorSeriesCollectionDirective>
    <RangenavigatorSeriesDirective
      dataSource={logData}
      xName="x"
      yName="y"
      type="Line"
    />
  </RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>

适用场景： 处理数值跨越多个数量级的数据

实现代码：

tsx

import { RangeNavigatorComponent, LineSeries, Logarithmic, Inject,
  RangenavigatorSeriesCollectionDirective,
  RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";

<RangeNavigatorComponent
  valueType="Logarithmic"
  logBase={10}
  minimum={100}
  maximum={100000}
  interval={1}
>
  <Inject services={[LineSeries, Logarithmic]} />
  <RangenavigatorSeriesCollectionDirective>
    <RangenavigatorSeriesDirective
      dataSource={logData}
      xName="x"
      yName="y"
      type="Line"
    />
  </RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>

Key Props

核心属性

Core Configuration

核心配置

valueType:
```
'Double' | 'DateTime' | 'Logarithmic'
```
- Axis value type (default: 'Double')
value:
```
number[] | Date[]
```
- Initial selected range [start, end]
minimum:
```
number | Date
```
- Minimum value of the axis
maximum:
```
number | Date
```
- Maximum value of the axis
interval:
```
number
```
- Axis interval
intervalType: Interval type for DateTime ('Auto' | 'Years' | 'Quarter' | 'Months' | 'Weeks' | 'Days' | 'Hours' | 'Minutes' | 'Seconds')

valueType:
```
'Double' | 'DateTime' | 'Logarithmic'
```
- 轴值类型（默认：'Double'）
value:
```
number[] | Date[]
```
- 初始选中范围 [起始值, 结束值]
minimum:
```
number | Date
```
- 轴的最小值
maximum:
```
number | Date
```
- 轴的最大值
interval:
```
number
```
- 轴间隔
intervalType: DateTime类型的间隔类型（'Auto' | 'Years' | 'Quarter' | 'Months' | 'Weeks' | 'Days' | 'Hours' | 'Minutes' | 'Seconds'）

Series Configuration

系列配置

series: Array of series objects with dataSource, xName, yName, type
dataSource: Data array for the series
xName: Field name for x-axis values
yName: Field name for y-axis values
type:
```
'Line' | 'Area' | 'StepLine'
```
- Series rendering type

series: 包含dataSource、xName、yName、type的系列对象数组
dataSource: 系列的数据数组
xName: x轴值的字段名
yName: y轴值的字段名
type:
```
'Line' | 'Area' | 'StepLine'
```
- 系列渲染类型

Appearance

外观配置

navigatorStyleSettings: Customize selected/unselected regions and thumbs
navigatorBorder: Border width and color

theme:

'Material' | 'Bootstrap' | 'Fabric' | 'Fluent' | 'Tailwind'

navigatorStyleSettings: 自定义选中/未选中区域与滑块
navigatorBorder: 边框宽度与颜色

theme:

'Material' | 'Bootstrap' | 'Fabric' | 'Fluent' | 'Tailwind'

Features

功能配置

tooltip: Tooltip configuration (enable, fill, opacity, textStyle, labelFormat)
periodSelectorSettings: Period selector configuration (periods, position, height)
enableDeferredUpdate: Trigger change event after drag completion (default: false)
allowSnapping: Snap slider to nearest interval (default: false)
enableGrouping: Enable multilevel labels for DateTime (default: false)
groupBy: Grouping interval type for multilevel labels
labelPosition:
```
'Outside' | 'Inside'
```
- Label position
enableRtl: Enable right-to-left rendering

tooltip: 工具提示配置（enable、fill、opacity、textStyle、labelFormat）
periodSelectorSettings: 周期选择器配置（periods、position、height）
enableDeferredUpdate: 拖动完成后触发变更事件（默认：false）
allowSnapping: 滑块对齐到最近间隔（默认：false）
enableGrouping: 为DateTime类型启用多级标签（默认：false）
groupBy: 多级标签的分组间隔类型
labelPosition:
```
'Outside' | 'Inside'
```
- 标签位置
enableRtl: 启用从右到左渲染

Events

事件

changed: Fired when range selection changes
load: Fired before rendering
loaded: Fired after rendering
tooltipRender: Fired before tooltip renders

changed: 范围选择变更时触发
load: 渲染前触发
loaded: 渲染后触发
tooltipRender: 工具提示渲染前触发

Common Use Cases

常见使用场景

Use Case 1: Stock Chart with Range Navigation

场景1：带范围导航的股票图表

Implement a financial stock chart with range selection for analyzing price trends over time. Use DateTime axis, Area series, and period selector for quick time range selection.

实现带范围选择功能的金融股票图表，用于分析价格趋势。使用DateTime轴、面积图系列和周期选择器实现快速时间范围选择。

Use Case 2: Dashboard Data Filtering

场景2：仪表盘数据过滤

Integrate Range Navigator with Data Grid to filter large datasets based on date or numeric ranges. Use the

changed

event to update the grid data source.

将Range Navigator与Data Grid集成，基于日期或数值范围过滤大型数据集。使用

changed

事件更新网格数据源。

Use Case 3: Historical Data Analysis

场景3：历史数据分析

Analyze historical sales, weather, or analytics data by providing intuitive range selection with tooltips showing exact values.

通过直观的范围选择和显示精确值的工具提示，分析历史销售、天气或分析数据。

Use Case 4: Mobile-Friendly Navigation

场景4：移动端友好导航

Use lightweight mode for mobile applications where chart rendering is not needed, providing simple range selection UI.

在移动应用中使用轻量模式，无需渲染图表，仅提供简单的范围选择UI。

Use Case 5: Multi-Magnitude Data Visualization

场景5：多量级数据可视化

Display scientific or financial data spanning multiple orders of magnitude (10^-6 to 10^6) using logarithmic scale.

使用对数刻度展示跨越多个数量级（10^-6到10^6）的科学或金融数据。

Module Injection Requirements

模块注入要求

The Range Navigator requires module injection for specific features:

tsx

import { Inject } from '@syncfusion/ej2-react-charts';

// For Area series
import { AreaSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[AreaSeries]} />

// For DateTime axis
import { DateTime } from '@syncfusion/ej2-react-charts';
<Inject services={[DateTime]} />

// For tooltips
import { RangeTooltip } from '@syncfusion/ej2-react-charts';
<Inject services={[RangeTooltip]} />

// For period selector
import { PeriodSelector } from '@syncfusion/ej2-react-charts';
<Inject services={[PeriodSelector]} />

// For logarithmic scale
import { Logarithmic } from '@syncfusion/ej2-react-charts';
<Inject services={[Logarithmic]} />

// For line series
import { LineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[LineSeries]} />

// For step line series
import { StepLineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[StepLineSeries]} />

Always inject all required modules in a single Inject component based on the features you're using.

Range Navigator需要为特定功能注入模块：

tsx

import { Inject } from '@syncfusion/ej2-react-charts';

// 面积图系列
import { AreaSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[AreaSeries]} />

// DateTime轴
import { DateTime } from '@syncfusion/ej2-react-charts';
<Inject services={[DateTime]} />

// 工具提示
import { RangeTooltip } from '@syncfusion/ej2-react-charts';
<Inject services={[RangeTooltip]} />

// 周期选择器
import { PeriodSelector } from '@syncfusion/ej2-react-charts';
<Inject services={[PeriodSelector]} />

// 对数刻度
import { Logarithmic } from '@syncfusion/ej2-react-charts';
<Inject services={[Logarithmic]} />

// 折线图系列
import { LineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[LineSeries]} />

// 阶梯折线图系列
import { StepLineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[StepLineSeries]} />

请始终根据你使用的功能，在单个Inject组件中注入所有必需的模块。

syncfusion-react-range-navigator

Original

Translation

Syncfusion React Range Navigator

Syncfusion React Range Navigator

When to Use This Skill

何时使用该组件

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

Getting Started

快速入门

Data Binding and Value Types

数据绑定与值类型

Series Types

系列类型

Customization

自定义配置

Period Selector

周期选择器

Lightweight Mode

轻量模式

Tooltip

工具提示

Labels

标签

Grid Lines and Tick Lines

网格线与刻度线

Accessibility

辅助功能

Right-to-Left (RTL) Support

从右到左（RTL）支持

Export and Print

导出与打印

Quick Start Example

快速入门示例

Common Patterns

常见模式

Pattern 1: Time-Series Data Navigation

模式1：时间序列数据导航

Pattern 2: Financial Data with Period Selector

模式2：带周期选择器的金融数据

Pattern 3: Custom Styling and Appearance

模式3：自定义样式与外观

Pattern 4: Lightweight Mode for Mobile

模式4：移动端轻量模式

Pattern 5: Logarithmic Scale for Large Ranges

模式5：大范围对数刻度

Key Props

核心属性

Core Configuration

核心配置

Series Configuration

系列配置

Appearance

外观配置

Features

功能配置

Events

事件

Common Use Cases

常见使用场景

Use Case 1: Stock Chart with Range Navigation

场景1：带范围导航的股票图表

Use Case 2: Dashboard Data Filtering

场景2：仪表盘数据过滤

Use Case 3: Historical Data Analysis

场景3：历史数据分析

Use Case 4: Mobile-Friendly Navigation

场景4：移动端友好导航

Use Case 5: Multi-Magnitude Data Visualization

场景5：多量级数据可视化

Module Injection Requirements

模块注入要求