syncfusion-react-range-navigator

Syncfusion React Range Navigator

Syncfusion React Range Navigator コンポーネントを実装するための包括的なスキルです。範囲選択機能を備え、データをスクロールして移動できる強力なデータ可視化コントロールです。このコンポーネントは、Charts や Data Grids などのほかのコントロールと簡単に組み合わせて、豊富なダッシュボードを作成できます。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• React アプリケーションに Range Navigator コンポーネントをインストールして設定する
• 時系列データや数値データの範囲選択と移動を実装する
• 移動が必要な金融データ、株価チャート、大規模なデータセットを表示する
• 数値、対数、DateTime の値型を使用したデータバインディングを設定する
• 系列の種類（Line、Area、StepLine）をカスタマイズする
• 定義済みの時間間隔を指定する期間セレクターを追加する
• チャートデータを使用しない軽量モードを有効にする
• ナビゲーターの外観（つまみ、境界線、領域）をカスタマイズする
• 範囲選択用のツールチップを設定する
• ラベル、グリッド線、目盛り線をカスタマイズする
• アクセシビリティ機能または RTL サポートを有効にする
• Range Navigator のチャートをエクスポートまたは印刷する
• Range Navigator をほかのチャートコンポーネントと統合する

コンポーネントの概要

Range Navigator は、大規模なデータセットの範囲を直感的に選択して移動できるデータ可視化コントロールです。データを縮小表示し、ユーザーが特定の範囲を選択できるインタラクティブなスライダーを備えています。このコンポーネントは、特に次の用途に役立ちます。

• 金融データの可視化： 株価分析、取引データ、市場動向
• 時系列データの移動： 履歴データの探索、日付範囲の選択
• 大規模データセットのフィルタリング： 大量のデータコレクションを効率的にスクロール
• ダッシュボードへの統合： Charts、Grids、その他のコンポーネントとの組み合わせ

主な機能：

• 複数のデータソースをサポート（ローカルおよびリモート）
• インタラクティブなツールチップとアニメーション
• モバイルデバイス向けの軽量モード
• カスタムの時間間隔を指定する期間セレクター
• 複数の軸と系列の種類
• 画像形式（PNG、JPEG、SVG、PDF）へのエクスポート

ドキュメントとナビゲーションガイド

API リファレンス

📄 参照： references/api.md

• API の包括的な概要：プロパティ、メソッド、イベント、スタイルクラス、簡単な使用例。公式ドキュメントへのリンクも含まれます。

はじめに

📄 参照： references/getting-started.md

• インストールと依存関係（@syncfusion/ej2-react-charts パッケージ）
• 開発環境の設定（Vite/Create React App）
• CSS スタイルシートとテーマの追加
• Range Navigator の基本的な実装
• モジュールの注入（AreaSeries、DateTime、RangeTooltip）
• データの設定（dataSource、xName、yName）
• ツールチップの有効化
• 最初のアプリケーションの実行

データバインディングと値型

📄 参照： references/data-binding.md

• 数値の値型（デフォルトの Double 型）
• 範囲の設定（minimum、maximum、interval）
• 数値ラベルの書式設定（n1、n2、p1、c1、カスタム書式）
• 大きさを表すデータ用の対数軸
• 対数範囲と底のカスタマイズ
• 時系列データ用の DateTime 値型
• DateTime の間隔の種類（Auto、Years、Quarter、Months、Weeks、Days、Hours、Minutes、Seconds）
• DateTime ラベルの書式設定
• 書式の完全なリファレンステーブル

系列の種類

📄 参照： references/series-types.md

• Line 系列（デフォルト、LineSeries モジュール）
• Area 系列（AreaSeries モジュール）
• StepLine 系列（StepLineSeries モジュール）
• 各系列の種類に必要なモジュールの注入
• 設定と実装の例

カスタマイズ

📄 参照： references/customization.md

• ナビゲーターの外観（navigatorStyleSettings）
• 選択済み領域と未選択領域の色
• つまみのカスタマイズ（Circle／Rectangle の形状、サイズ、境界線、塗りつぶし）
• 境界線のカスタマイズ（幅、色）
• パフォーマンス最適化のための更新延期
• 正確な選択を実現するスナップ機能
• アニメーション時間の制御

期間セレクター

📄 参照： references/period-selector.md

• 定義済み期間の設定
• 期間配列（interval、text、intervalType）
• モジュールの挿入（PeriodSelector）
• 配置（Top または Bottom）
• 高さのカスタマイズ
• 範囲セレクターを無効にする（期間セレクターのみのモード）
• intervalType（Auto、Years、Quarter、Months、Weeks、Days、Hours、Minutes、Seconds）

軽量モード

📄 参照： references/lightweight.md

• チャートデータなしで使える軽量 Range Navigator
• 軽量モードを使用する場面
• モバイルに適した実装
• 基本的な設定

ツールチップ

📄 参照： references/tooltip.md

• ツールチップの有効化と無効化
• ツールチップのカスタマイズ（fill、opacity、textStyle）
• ツールチップのラベル形式
• 日付と時刻の形式オプション
• 完全な形式リファレンステーブル

ラベル

📄 参照： references/labels.md

• 複数レベルのラベル（DateTime の enableGrouping）
• intervalType によるグループ化（Auto、Years、Quarter、Months、Weeks、Days、Hours、Minutes、Seconds）
• 重なりを避けるスマートラベル（labelIntersectAction）
• ラベルの配置（内側または外側）
• ラベルスタイルのカスタマイズ（フォント、色、フォントファミリー、太さ、サイズ）

グリッド線と目盛り線

📄 参照： references/grid-and-tick.md

• グリッド線のカスタマイズ（majorGridLines）
• グリッド線の幅、色、dashArray
• 目盛り線のカスタマイズ（majorTickLines）
• 目盛り線の幅、色、dashArray
• 設定例

アクセシビリティ

📄 参照： references/accessibility.md

• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• WCAG 2.0 への準拠
• アクセシビリティ機能とベストプラクティス

右から左（RTL）へのサポート

📄 参照： references/rtl.md

• RTL モードの有効化（enableRtl プロパティ）
• RTL レイアウトの動作
• 実装例

エクスポートと印刷

📄 参照： references/export-print.md

• 画像形式へのエクスポート（PNG、JPEG、SVG、PDF）
• 印刷機能
• エクスポート／印刷メソッドの使用方法
• 設定オプション

クイックスタートの例

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

よくあるパターン

パターン 1：時系列データのナビゲーション

ユーザーのニーズ： 日付範囲を選択して時系列データをナビゲートする

実装：

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

パターン 2：期間セレクターを使った金融データ

ユーザーのニーズ： 定義済みの期間（1M、3M、6M、YTD、1Y）を使って株価チャートをナビゲートする

実装：

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

パターン 3：スタイルと外観のカスタマイズ

ユーザーのニーズ： ナビゲーターの色、つまみ、枠線をカスタマイズする

実装：

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

パターン 4：モバイル向けの軽量モード

ユーザーのニーズ： モバイルデバイス向けに、チャートデータなしのシンプルな範囲セレクターを使用する

実装：

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

パターン 5：広範囲のデータに対応する対数スケール

ユーザーのニーズ： 複数の桁にわたる値を持つデータを扱う

実装：

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>

主なプロパティ

基本設定

• 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: dataSource、xName、yName、type を含む系列オブジェクトの配列
• dataSource: 系列のデータ配列
• xName: x 軸の値に使用するフィールド名
• yName: y 軸の値に使用するフィールド名
• type: 'Line' | 'Area' | 'StepLine' - 系列の描画形式

外観

• navigatorStyleSettings：選択領域／非選択領域とつまみをカスタマイズします
• navigatorBorder：枠線の幅と色
• theme：'Material' | 'Bootstrap' | 'Fabric' | 'Fluent' | 'Tailwind'

機能

• tooltip：ツールチップの設定（enable、fill、opacity、textStyle、labelFormat）
• periodSelectorSettings：期間セレクターの設定（periods、position、height）
• enableDeferredUpdate：ドラッグ完了後に変更イベントを発生させます（デフォルト：false）
• allowSnapping：スライダーを最も近い間隔にスナップします（デフォルト：false）
• enableGrouping：DateTime の複数階層ラベルを有効にします（デフォルト：false）
• groupBy：複数階層ラベルのグループ化間隔の種類
• labelPosition：'Outside' | 'Inside' - ラベルの位置
• enableRtl：右から左への描画を有効にします

イベント

• changed：範囲選択が変更されたときに発生します
• load：描画前に発生します
• loaded：描画後に発生します
• tooltipRender：ツールチップの描画前に発生します

一般的なユースケース

ユースケース 1：範囲ナビゲーション付き株価チャート

価格の経時的な傾向を分析するため、範囲選択ができる金融株価チャートを実装します。DateTime 軸、Area 系列、期間セレクターを使用して、期間をすばやく選択します。

ユースケース 2：ダッシュボードのデータフィルタリング

Range Navigator を Data Grid と統合し、日付または数値の範囲に基づいて大規模なデータセットをフィルタリングします。changed イベントを使用して、グリッドのデータソースを更新します。

ユースケース 3：過去データの分析

正確な値を表示するツールチップと直感的な範囲選択を利用して、過去の売上、天気、分析データを分析します。

ユースケース 4：モバイルに適したナビゲーション

チャートの描画が不要なモバイルアプリケーションでは、軽量モードを使用してシンプルな範囲選択 UI を提供します。

ユースケース 5：桁数が幅広いデータの可視化

対数スケールを使用して、複数の桁数にわたる（10^-6～10^6）科学データや金融データを表示します。

モジュール注入の要件

Range Navigator では、特定の機能を使用するためにモジュールの注入が必要です。

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

使用する機能に応じて、必要なすべてのモジュールを単一の Inject コンポーネントに必ず注入してください。