syncfusion-aspnetcore-range-navigator

Syncfusion ASP.NET Core RangeNavigator

RangeNavigator は、インタラクティブなつまみとスライダーを使って、ユーザーがデータ範囲を選択し、データ内を移動できるデータ可視化コントロールです。チャート、グリッド、ダッシュボードとシームレスに連携し、豊かでインタラクティブなデータ探索体験を実現します。

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

次のような場合は、RangeNavigator コンポーネントを使用します。

• 日付／時刻の範囲を選択する - 大規模なデータセットから、ユーザーが特定の期間を選択できるようにします
• 大規模なデータセット内を移動する - 大量のデータに対して、スクロールと範囲選択の機能を提供します
• 時系列データを可視化する - 選択可能な範囲内にチャートや系列を表示します
• 期間ボタンを追加する - あらかじめ定義された期間（1D、5D、1M、3M、6M、1Y）をすばやく選択できるようにします
• 軽量なセレクターを作成する - チャートを表示せずに範囲選択を表示します
• 外観をカスタマイズする - つまみ、枠線、色、アニメーションのスタイルを設定します
• 可視化をエクスポートする - 範囲の可視化を画像または PDF として生成します
• アクセシビリティに対応する - スクリーンリーダーをサポートします

コンポーネントの概要

RangeNavigator では、次の機能を利用できます。

• 複数のデータ型： 数値、DateTime、対数スケール
• 3 種類の系列： Line、Area、StepLine
• インタラクティブな範囲選択： つまみをドラッグする、ラベルをタップする、またはプログラムで設定する
• 期間セレクター： 一般的な日付間隔を選択できるクイックボタン
• カスタマイズオプション： 色、サイズ、アニメーション、RTL サポート
• エクスポート／印刷： JPEG、PNG、SVG、PDF 形式
• アクセシビリティ： WCAG 2.2 AA に準拠し、スクリーンリーダーをサポート

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

API リファレンス

📄 参照: references/api-reference.md

• RangeNavigator コンポーネントの完全な API ドキュメント
• コンストラクターとプロパティの定義
• イベントプロパティとコールバック
• 構成オプションと使用パターン
• 関連する設定クラス

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージのインストール
• ASP.NET Core プロジェクトのセットアップ
• タグヘルパーの登録
• スクリプト参照とスクリプトマネージャー
• RangeNavigator の基本的な実装
• 系列を使用したデータバインディング

データバインディングと系列の種類

📄 参照: references/data-binding-and-series.md

• 数値スケールの構成
• DateTime スケールのサポート
• 対数スケール
• 系列の種類（Line、Area、StepLine）
• データソースのバインディング
• X/Y フィールドのマッピング

範囲の選択と値

📄 参照: references/range-and-values.md

• 範囲の選択方法（ドラッグ、タップ、プログラムによる設定）
• 値プロパティの構成
• 値の種類とスケール
• Min/Max の設定
• 更新の遅延
• スナップ動作

期間セレクターの構成

📄 参照: references/period-selector.md

• 期間セレクターのセットアップ
• 間隔の種類と数
• 配置（Top/Bottom）
• 高さのカスタマイズ
• 表示の制御

ラベル、グリッド線、軸

📄 参照: references/labels-and-axis.md

• グループ化を使用した複数レベルのラベル
• ラベルの配置と書式設定
• スマートなラベル管理
• グリッド線のカスタマイズ
• 目盛り線のカスタマイズ
• 間隔の構成

ツールチップとインタラクション

📄 参照: references/tooltip-and-interactions.md

• ツールチップの有効化／無効化
• ツールチップのカスタマイズ（色、不透明度、フォント）
• ツールチップラベルの書式設定
• アニメーションの長さ
• アクセシビリティ機能

カスタマイズと外観

📄 参照: references/customization-and-appearance.md

• ナビゲーターの色（選択済み／未選択領域）
• つまみのカスタマイズ（形状、サイズ、色）
• 枠線のカスタマイズ
• RTL（右から左）サポート
• 軽量モード
• テーマの選択

エクスポート、印刷、高度な機能

📄 読む: references/export-print-and-advanced.md

• 画像形式（JPEG、PNG、SVG、PDF）へのエクスポート
• 印刷機能
• EJ1 から EJ2 への API 移行
• アクセシビリティ標準への準拠

クイックスタートの例

<ejs-rangenavigator id="rangeNavigator" 
    valueType="DateTime" 
    width="100%" 
    height="150px">
    <e-rangenavigator-rangenavigatorseriescollection>
        <e-rangenavigator-rangenavigatorseries 
            datasource="ViewBag.Data" 
            xName="x" 
            yName="y" 
            type="Area">
        </e-rangenavigator-rangenavigatorseries>
    </e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>

C# のコードビハインド:

public class IndexModel
{
    public void OnGet()
    {
        ViewBag.Data = GetChartData();
    }
    
    public List<RangeData> GetChartData()
    {
        return new List<RangeData>
        {
            new RangeData { x = new DateTime(2005, 1, 1), y = 21 },
            new RangeData { x = new DateTime(2005, 2, 1), y = 24 },
            new RangeData { x = new DateTime(2005, 3, 1), y = 36 }
        };
    }
}

public class RangeData
{
    public DateTime x { get; set; }
    public double y { get; set; }
}

よく使われるパターン

パターン 1: 期間セレクター付き RangeNavigator

よく使われる日付範囲を選べるクイックボタン（1D、5D、1M、3M、6M、1Y）:

<ejs-rangenavigator valueType="DateTime" width="100%" height="150px" id="PeriodSelector">
    <e-rangenavigator-periodselectorsettings>
        <e-periods>
            <e-period interval="1" intervalType="Days" text="1D"></e-period>
            <e-period interval="5" intervalType="Days" text="5D"></e-period>
            <e-period interval="1" intervalType="Months" text="1M"></e-period>
            <e-period interval="3" intervalType="Months" text="3M"></e-period>
            <e-period interval="6" intervalType="Months" text="6M"></e-period>
            <e-period interval="1" intervalType="Years" text="1Y"></e-period>
        </e-periods>
    </e-rangenavigator-periodselectorsettings>
    <e-rangenavigator-rangenavigatorseriescollection>
        <e-rangenavigator-rangenavigatorseries datasource="ViewBag.Data" xName="x" yName="y" type="Area"></e-rangenavigator-rangenavigatorseries>
    </e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>

パターン 2: 軽量な範囲セレクター（チャートなし）

データを視覚化せずに範囲選択を表示します:

<ejs-rangenavigator valueType="DateTime" 
    minimum="new DateTime(2018, 1, 1)" 
    maximum="new DateTime(2018, 12, 31)"
    datasource="ViewBag.Data" xName="x" yName="y">
</ejs-rangenavigator>

主なプロパティ

プロパティ	型	目的	例
valueType	DateTime, Double, Logarithmic	データのスケールの種類	valueType="DateTime"
width	string/number	コンポーネントの幅	width="100%"
height	string/number	コンポーネントの高さ	height="150px"
minimum	DateTime/number	軸の最小値	minimum="1"
maximum	DateTime/number	軸の最大値	maximum="100"
value	DateTime[]/number[]	選択した範囲	value="new DateTime[]{start, end}"
intervalType	Years, Months, Days, Hours, Minutes, Seconds	日付の間隔の種類	intervalType="Months"
interval	number	間隔の数	interval="3"
labelFormat	string	日付／数値ラベルの書式	labelFormat="MMM dd, yyyy"
enableGrouping	bool	複数レベルのラベル	enableGrouping="true"
enableRtl	bool	右から左への表示のサポート	enableRtl="true"
allowSnapping	bool	間隔にスナップ	allowSnapping="true"
enableDeferredUpdate	bool	リリース時に更新	enableDeferredUpdate="true"
animationDuration	number	アニメーション速度（ミリ秒）	animationDuration="500"

よくあるユースケース

1. 株価の範囲セレクター - ユーザーが期間を選択して、過去の株価データを分析できるようにします
2. 売上ダッシュボードのフィルター - ユーザーが日付範囲を選び、売上レポートや指標を絞り込めるようにします
3. 時系列データエクスプローラー - インタラクティブな範囲選択で、大規模なデータセットを探索できるようにします
4. イベントタイムラインナビゲーション - 日付範囲を指定して、過去のイベントやログをたどれるようにします
5. 軽量な日付フィルター - モバイルや埋め込みの用途向けに、チャートを使わないシンプルな範囲セレクターを提供します
6. 複数期間の分析 - 事前定義された時間間隔（日次、月次、年次）を切り替えるクイックボタンを提供します

---

お困りですか？ 上記のナビゲーションガイドから、実現したい内容に応じた適切なリファレンスファイルをお読みください。