syncfusion-aspnetcore-range-navigator

Syncfusion ASP.NET Core RangeNavigator

RangeNavigator 是一种数据可视化控件，允许用户通过交互式滑块和滑动条选择并浏览数据范围。它可与图表、网格和仪表板无缝集成，打造丰富的交互式数据探索体验。

何时使用此技能

在需要以下功能时，使用 RangeNavigator 组件：

• 选择日期/时间范围 - 让用户从大型数据集中选择特定时间段
• 浏览大型数据集 - 为大数据提供滚动和范围选择功能
• 可视化时间序列数据 - 在可选范围内显示图表或序列
• 添加周期按钮 - 提供预定义时间间隔的快捷选项（1D、5D、1M、3M、6M、1Y）
• 创建轻量级选择器 - 显示范围选择功能，而不显示图表
• 自定义外观 - 设置滑块、边框、颜色和动画的样式
• 导出可视化内容 - 生成范围可视化内容的图像或 PDF
• 支持无障碍功能 - 确保支持屏幕阅读器

组件概览

RangeNavigator 提供：

• 多种数据类型： 数值、DateTime 和对数刻度
• 三种序列类型： 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 项目设置
• Tag Helper 注册
• 脚本引用和脚本管理器
• RangeNavigator 基本实现
• 使用序列进行数据绑定

数据绑定和序列类型

📄 阅读： references/data-binding-and-series.md

• 数值刻度配置
• DateTime 刻度支持
• 对数刻度
• 序列类型（Line、Area、StepLine）
• 数据源绑定
• X/Y 字段映射

范围选择和值

📄 阅读： references/range-and-values.md

• 范围选择方法（拖动、点击、编程设置）
• Value 属性配置
• 值类型和刻度
• Min/Max 设置
• 延迟更新
• 吸附行为

周期选择器配置

📄 阅读： references/period-selector.md

• 周期选择器设置
• 间隔类型和数量
• 位置（顶部/底部）
• 高度自定义
• 可见性控制

标签、网格线和坐标轴

📄 阅读： 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 迁移 API 到 EJ2
• 符合无障碍标准

快速入门示例

<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	动画速度（ms）	animationDuration="500"

常见用例

1. 股价范围选择器 - 允许用户选择时间段，以分析历史股票数据
2. 销售仪表板筛选器 - 让用户选择日期范围，以筛选销售报告和指标
3. 时间序列数据探索器 - 通过交互式范围选择，帮助用户探索大型数据集
4. 事件时间线导航 - 按日期范围浏览历史事件或日志
5. 轻量级日期筛选器 - 无图表的简单范围选择器，适用于移动设备或嵌入式场景
6. 多周期分析 - 使用快捷按钮在预定义的时间间隔（日、月、年）之间切换

---

需要帮助？ 请根据你想要完成的任务，阅读上方导航指南中相应的参考文件。