syncfusion-angular-range-navigator

Syncfusion Angular Range Navigator の実装

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

次のような場合にこのスキルを使用します。

• Angular アプリケーションで Range Navigator コンポーネントをゼロから作成する
• ローカル配列またはリモートデータソースとのデータバインディングを設定する
• さまざまなデータ型に合わせて日時軸または数値軸を構成する
• 書式設定した表示やカスタムテンプレートでツールチップをカスタマイズする
• 日付範囲をすばやく選択するための期間セレクターを実装する
• 複数の系列タイプ（Area、Line、Spline、StepLine など）を追加する
• モバイルアプリケーションやパフォーマンスを最適化したアプリケーション向けに軽量モードを有効にする
• 国際化されたアプリケーション向けにRTL（右から左）のレイアウトをサポートする
• 軸ラベルを書式設定し、グリッドの目盛りをカスタマイズする
• Range Navigator を画像または PDF としてエクスポートまたは印刷する
• キーボード操作と ARIA 属性でアクセシビリティを確保する
• 空のデータポイントやエッジケースを適切に処理する

---

コンポーネントの概要

Syncfusion Angular Range Navigator は、時系列データの閲覧、選択、移動に使用できる強力なデータ可視化コンポーネントです。ユーザーは大規模なデータセットから範囲をスクロールして選択でき、Chart や DataGrid などの他の Syncfusion コンポーネントとシームレスに連携します。スタンドアロンアーキテクチャを採用し、Angular 21 以降向けに設計されているため、複数の軸タイプ、系列構成、インタラクティブなツールチップ、包括的なエクスポート／印刷機能を利用できます。

主な機能

• データバインディング： ローカル配列、リモートデータソース、JSON 配列
• 軸の種類： カスタム間隔に対応した数値軸と DateTime 軸
• 系列タイプ： Area、Line、Spline、StepLine、StepArea（自動データマッピング対応）
• ツールチップ： 有効化／無効化、カスタム書式設定、ヘッダー、HTML テンプレート
• 期間セレクター： すばやく選択するためのボタン（日、週、月、年、カスタム範囲）
• 軽量モード： モバイルアプリケーションやパフォーマンスが重要なアプリケーション向けに最適化
• ラベルとグリッド： カスタマイズ可能な軸ラベル、グリッドの目盛り、ラベル書式
• RTL サポート： テキストとレイアウトの完全な右から左への表示に対応
• エクスポート／印刷： 高品質出力の PNG、SVG、PDF 形式
• アクセシビリティ： WCAG 準拠、キーボード操作、ARIA 属性

---

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• 最初の Range Navigator を作成する
• データバインディングを使用した基本的なコンポーネント構成
• CSS とテーマのインポート
• 最小限の動作例
• モジュールのインジェクションとサービスプロバイダー

軸の構成と種類

📄 参照： references/axis-configuration.md

• 数値軸のセットアップと構成
• DateTime 軸の実装
• 軸の間隔と範囲のカスタマイズ
• 軸ラベルの書式設定
• 軸タイプの比較と選択のガイダンス
• カスタム軸値のマッピング

系列タイプとデータバインディング

📄 参照： references/series-types.md

• 使用可能な系列タイプ（Area、Line、Spline、StepLine、StepArea）
• 系列のデータバインディングと xName/yName のマッピング
• 複数系列の構成
• 系列の色とスタイルのカスタマイズ
• データソースの構成（ローカルおよびリモート）
• 空のポイントの処理

ツールチップとインタラクティブ機能

📄 参照： references/tooltips-interactivity.md

• ツールチップの有効化と構成
• ツールチップの書式設定とヘッダー
• HTML を使用したツールチップテンプレート
• カスタムツールチップの内容
• ツールチップの位置と動作
• 範囲選択イベントと処理

期間セレクターと範囲選択

📄 参照： references/period-selector.md

• 期間セレクターの構成
• 組み込みの期間オプション（日、週、月、年）
• カスタム期間範囲
• 期間セレクターのスタイル設定
• プログラムによる範囲選択
• 選択変更のイベント処理

ラベル、目盛り、書式設定

📄 参照： 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 Range Navigator

日付範囲を選択して時系列データを閲覧する場合：

@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：期間セレクターを使用した Range Navigator

よく使う期間をすばやく選択するボタンが必要な場合：

@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：モバイル向けの軽量 Range Navigator

モバイルデバイス向けに最適化された Range Navigator が必要な場合：

@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：数値軸の Range Navigator

数値データの範囲を閲覧する場合：

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：カスタムツールチップを使用した Range Navigator

書式を設定したカスタムツールチップを表示する場合：

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

---

主要な Props のリファレンス

Prop	型	目的
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 リファレンス

Syncfusion Angular の RangeNavigator の完全な API リファレンスは、references フォルダーで確認できます。公式ドキュメントに対応したプロパティのアンカー、メソッドへのリンク、イベント引数の型が含まれています。

API リファレンスを参照してください：references/api-reference.md

一般的なユースケース

1. 株式市場データ： 日付範囲を選択して、過去の株価を閲覧します
2. センサーデータの監視： 時系列のセンサー測定値やメトリクスをたどります
3. ウェブサイト分析： トラフィックやユーザーの行動を分析する日付範囲を選択します
4. 金融チャート： 期間をインタラクティブに選択して、金融データを調べます
5. アプリケーションのパフォーマンス： 期間をすばやく選択して、パフォーマンスメトリクスを経時的に監視します
6. 営業ダッシュボード： さまざまな期間の営業データを確認します
7. 気象データ： 日付を移動して、過去の気象パターンを閲覧します
8. IoT データの可視化： 大規模な IoT センサーデータセットを効率よくたどります

---

他のコンポーネントとの連携

Range Navigator は、他の Syncfusion コンポーネントとシームレスに連携します。

• Chart Component： Range Navigator の選択内容をメインチャートの表示と同期します
• DataGrid： 選択した日付範囲に基づいてグリッドデータをフィルタリングします
• Stock Chart： 株価データの可視化と組み合わせて、分析を強化します

---

詳細については、Syncfusion Angular Range Navigator Documentationをご覧ください。