syncfusion-aspnetcore-stock-chart

实现 Syncfusion 股票图表

Syncfusion 股票图表是一种专用的数据可视化控件，旨在显示金融市场数据，并支持多种系列类型、技术指标和交互功能。

何时使用此技能

在需要以下功能时使用此技能：

• 使用蜡烛图、折线图或 OHLC 图表显示股票价格数据
• 添加技术分析指标（移动平均线、RSI、布林带等）
• 创建支持缩放、选择和工具提示的交互式交易仪表板
• 实现用于按时间筛选的范围选择器和周期选择器
• 在金融图表中可视化趋势线和股票事件
• 使用主题和渐变自定义图表外观

组件概览

股票图表组件提供：

• 6 种系列类型，满足不同的数据可视化需求
• 10 种技术指标，用于金融分析
• 交互功能，如十字准线、工具提示和缩放
• 图例和坐标轴自定义，支持灵活布局
• 股票事件和趋势线，用于添加注释
• 导出和打印功能，用于生成报告
• 周期和范围选择器，用于按时间导航
• 注释，用于添加自定义标记和标签
• 多坐标轴支持，适用于复杂布局

文档和导航指南

API 参考

📄 阅读： references/api-reference.md

• 股票图表组件的完整 API 文档
• 构造函数和属性定义
• 事件属性和回调
• 配置选项和使用模式
• 相关设置类和数据结构

入门指南

📄 阅读： references/getting-started.md

• NuGet 包安装和设置
• 创建 ASP.NET Core 应用程序
• 标记帮助程序配置
• 基本控件渲染
• 脚本管理器注册

系列类型和数据可视化

📄 阅读： references/series-types.md

• 6 种主要系列类型（Line、Candle、HollowCandle、Spline、Hilo、HiloOpenClose）
• 为数据选择合适的系列
• 系列配置和自定义
• 各系列类型的数据要求

数据绑定和配置

📄 阅读： references/data-binding.md

• DataSource 配置和绑定
• DateTime 轴与 Numeric 轴
• OHLC 数据结构
• 金融数据格式
• 基于日期的轴配置

图例自定义

📄 阅读： references/legend-customization.md

• 启用和禁用图例
• 图例位置（Left、Right、Top、Bottom、Custom）
• 图例对齐方式（Center、Near、Far）
• 使用坐标自定义位置
• 切换图例可见性

技术指标

📄 阅读： references/technical-indicators.md

• 10 种指标类型（AccumulationDistribution、ATR、EMA、SMA、TMA、Momentum、MACD、RSI、Stochastic、BollingerBand）
• 添加和移除指标
• 指标配置和自定义
• 超买/超卖阈值
• 基于成交量的指标

用户交互

📄 阅读： references/user-interactions.md

• 十字准线和跟踪球
• 数据点的选择模式
• 工具提示配置
• 缩放和滚动交互
• 交互功能自定义

高级功能

📄 阅读： references/advanced-features.md

• 趋势线（线性、指数、多项式等）
• 股票事件和注释
• 用于筛选的范围选择器
• 用于时间导航的周期选择器
• 无障碍功能

自定义和外观

📄 阅读： references/customization-appearance.md

• 图表尺寸和大小设置
• 主题和配色方案
• 坐标轴自定义
• 用于提升视觉效果的渐变填充
• 导出和打印选项

快速开始

@{
    var stockData = new[]
    {
        new { x = new DateTime(2023, 1, 1), open = 150, high = 155, low = 145, close = 152, volume = 1000000 },
        new { x = new DateTime(2023, 1, 2), open = 152, high = 158, low = 151, close = 156, volume = 1200000 }
    };
}

<ejs-stockchart id="container">
    <e-stockchart-series-collection>
        <e-stockchart-series dataSource="stockData"
                             xName="x"
                             yName="close"
                             type="Candle">
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

常见模式

模式 1：带日期时间轴的蜡烛图

创建显示 OHLC（开盘价、最高价、最低价、收盘价）数据的金融图表：

<ejs-stockchart id="stockChart">
    <e-stockchart-primaryxaxis 
        valueType="DateTime">
    </e-stockchart-primaryxaxis>
    <e-stockchart-series-collection>
        <e-stockchart-series 
            dataSource="financialData" 
            xName="date" 
            yName="close" 
            type="Candle">
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

模式 2：添加技术指标

使用移动平均线增强分析：

<ejs-stockchart id="stockChart">
    <e-stockchart-indicators>
        <e-stockchart-indicator 
            type="Ema" 
            field="Close" 
            period="14">
        </e-stockchart-indicator>
    </e-stockchart-indicators>
</ejs-stockchart>

模式 3：交互功能

启用十字准线和工具提示，便于用户交互：

<ejs-stockchart id="stockChart">
    <e-stockchart-tooltipsettings enable="true"></e-stockchart-tooltipsettings>
    <e-stockchart-crosshairsettings lineType="Vertical">
        <e-crosshairsettings-line color="red"></e-crosshairsettings-line>
    </e-stockchart-crosshairsettings>
</ejs-stockchart>

模式 4：图例配置

设置图例的位置并进行自定义：

<ejs-stockchart id="stockChart">
    <e-stockchart-legendsettings 
        visible="true" 
        position="Bottom" 
        alignment="Center">
    </e-stockchart-legendsettings>
</ejs-stockchart>

关键属性

核心属性

• dataSource：图表的数据集合（数组或 DataManager）
• xName：X 轴值的属性名称
• yName：Y 轴值的属性名称（通常为收盘价）
• type：系列类型（Line、Candle、HollowCandle、Spline、Hilo、HiloOpenClose）

外观属性

• background：图表背景颜色（十六进制或 rgba）
• theme：视觉主题（Material、Fabric、Bootstrap、MaterialDark 等）
• width：图表宽度（带 px 或 % 的字符串）
• height：图表高度（带 px 或 % 的字符串）
• title：图表标题文本
• isTransposed：以转置方式渲染图表

功能控制属性

• enablePeriodSelector：显示/隐藏周期选择器（默认值：true）
• enableSelector：显示/隐藏范围选择器（默认值：true）
• enableCustomRange：允许选择自定义范围（默认值：true）
• enablePersistence：在页面重新加载后保留组件状态
• enableRtl：以从右向左的方向渲染
• isMultiSelect：启用多个数据点选择
• isSelect：启用选择功能

导出属性

• exportType：导出格式类型（PNG、SVG、PDF）
• indicatorType：技术指标类型
• seriesType：系列类型选项
• trendlineType：趋势线类型选项

配置对象

• annotations：注释设置集合
• axes：次坐标轴集合
• border：边框颜色和宽度设置
• chartArea：图表区域边框和背景
• crosshair：十字准线自定义设置
• legendSettings：图例外观和行为
• margin：图表边距（左、右、上、下）
• periods：周期选择器选项
• primaryXAxis：主 X 轴配置
• primaryYAxis：主 Y 轴配置
• rows：多个绘图区设置
• selectedDataIndexes：预先选择的数据点
• selectionMode：选择模式（Point、Series、Cluster、DragXY、DragX、DragY、None）
• series：系列集合
• stockEvents：股票事件注释
• tooltip：工具提示设置
• zoomSettings：缩放和平移配置

模板属性

• locale：区域设置和本地化值
• noDataTemplate：图表为空时的显示模板

关键事件

图表生命周期事件

• load：在图表开始渲染之前触发
• loaded：在图表完成渲染之后触发
• beforeExport：在开始导出之前触发（允许自定义导出）

用户交互事件

• axisLabelRender：在渲染每个坐标轴标签之前触发
• pointClick：点击数据点时触发
• pointMove：在数据点上移动时触发
• stockChartMouseClick：点击图表时触发
• stockChartMouseDown：鼠标按下时触发
• stockChartMouseUp：鼠标抬起时触发
• stockChartMouseMove：在图表上悬停时触发
• stockChartMouseLeave：光标离开图表时触发
• onZooming：完成缩放选择后触发
• rangeChange：范围改变时触发

渲染事件

• seriesRender：在渲染每个系列之前触发
• legendRender：在渲染图例之前触发
• legendClick：点击图例项后触发
• tooltipRender：在渲染工具提示之前触发
• crosshairLabelRender：在渲染十字准线工具提示之前触发
• selectorRender：在渲染选择器之前触发
• stockEventRender：在渲染股票事件之前触发

常见用例

1. 股票价格监控：使用蜡烛图显示实时股票价格
2. 技术分析仪表板：结合多个指标进行交易分析
3. 投资组合概览：并排可视化多只股票
4. 历史价格趋势：使用平滑折线图展示长期价格走势
5. 交易信号：使用趋势线和股票事件为图表添加注释
6. 按周期筛选：允许用户使用周期选择器选择时间范围

---

后续步骤

从上方的导航指南中选择与当前任务匹配的参考文件。每份参考资料都为相应功能领域提供了完整、独立的文档。