syncfusion-aspnetcore-range-navigator

用途

Syncfusion ASP.NET Core RangeNavigator（范围导航器/范围选择器）是一个数据可视化控件，允许用户通过交互式滑柄和滑块选择并浏览数据范围，可与图表、网格和仪表板集成，形成交互式数据探索体验。该技能用于在 ASP.NET Core 应用中实现 RangeNavigator 组件。

适用场景

资料列出的典型场景包括：

选择日期/时间范围：让用户从大数据集中选取特定时间段
导航大型数据集：提供大数据集的滚动与范围选择能力
可视化时间序列数据：在可选范围内显示图表或系列
添加周期按钮：提供预设时间间隔快捷按钮（1D、5D、1M、3M、6M、1Y）
创建轻量选择器：在无图表可视化的情况下显示范围选择
自定义外观：设置滑柄、边框、颜色和动画样式
导出可视化：生成范围可视化的图片或 PDF
支持无障碍访问：确保屏幕阅读器支持

主要能力

资料说明组件提供：

多种数据类型：数值、日期时间和对数刻度
三种系列类型：Line（线形）、Area（面积）、StepLine（阶梯线）
交互式范围选择：拖动滑柄、点击标签或通过编程方式设置
周期选择器：常用日期区间的快捷按钮
自定义选项：颜色、尺寸、动画、RTL 支持
导出/打印：JPEG、PNG、SVG、PDF 格式
无障碍：符合 WCAG 2.2 AA，支持屏幕阅读器

关键属性（资料来源表格）：valueType（DateTime、Double、Logarithmic）、width、height、minimum、maximum、value（DateTime[]/number[]）、intervalType（Years、Months、Days、Hours、Minutes、Seconds）、interval、labelFormat、enableGrouping（多级标签）、enableRtl（从右到左）、allowSnapping（吸附到区间）、enableDeferredUpdate（释放时更新）、animationDuration（动画速度，毫秒）。

使用方式

资料提供的基本示例（DateTime 数据）：

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

模式一：带周期选择器的 RangeNavigator

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

模式二：轻量范围选择器（无图表）

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

文档导航

资料提供以下参考文件：

references/api-reference.md：构造函数与属性定义、事件属性与回调、配置选项与用法模式、相关设置类
references/getting-started.md：NuGet 包安装、ASP.NET Core 项目设置、标记帮助器注册、脚本引用与脚本管理器、基本实现、系列数据绑定
references/data-binding-and-series.md：数值刻度、日期时间刻度、对数刻度、系列类型、数据源绑定、X/Y 字段映射
references/range-and-values.md：范围选择方法（拖动、点击、编程）、值属性配置、值类型与刻度、最小/最大设置、延迟更新、吸附行为
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：导出图片格式、打印功能、从 EJ1 到 EJ2 的 API 迁移、无障碍标准合规

常见用例

股票价格范围选择器：让用户选择时间段以分析历史股票数据
销售仪表板筛选器：让用户选择日期范围以筛选销售报告与指标
时间序列数据浏览器：通过交互式范围选择探索大型数据集
事件时间线导航：按日期范围浏览历史事件或日志
轻量日期筛选器：用于移动端或嵌入式场景的简单范围选择器（无图表）
多周期分析：通过快捷按钮在预设时间间隔（日、月、年）之间切换

限制与说明

资料的入门说明涉及 NuGet 包安装、ASP.NET Core 项目设置、标记帮助器注册、脚本引用与脚本管理器等步骤，具体安装命令与配置细节需查阅对应的 getting-started 参考文件，资料正文未提供完整命令。其他未在资料中明确的功能、收费、价格、平台或效果信息暂未提供。