syncfusion-angular-stock-chart

实现股票图表

股票图表组件是一种专用可视化工具，用于展示随时间变化的金融数据，包括 OHLC（开盘价、最高价、最低价、收盘价）数据、技术指标和交互式范围选择。非常适合股票市场分析、加密货币追踪，以及任何时间序列金融数据可视化场景。

何时使用此技能

• 金融数据可视化： 展示随时间变化的股票价格、加密货币价格或外汇数据
• OHLC 图表： 绘制价格走势的蜡烛图、柱状图或折线图
• 技术分析： 添加移动平均线、布林带、RSI、MACD 和其他指标
• 日期范围选择： 允许用户通过范围选择器或周期选择器选择特定时间段
• 交互式探索： 实现十字准线、工具提示和动态系列切换
• 实时更新： 处理实时数据流并自动更新图表
• 导出与共享： 生成 PNG、SVG、PDF 文件，或打印图表
• 多系列分析： 在同一图表上比较多个金融工具

组件概览

股票图表基于 Syncfusion 的 Chart 组件构建，并提供专用功能：

• 7 种系列类型： Line、Spline、Area、HiLo、HiLoOpenClose、Hollow Candle、Candle
• 技术指标： MA、BB、RSI、MACD、Stochastic 等
• 交互控件： 范围选择器、周期选择器、十字准线、工具提示
• DateTime 坐标轴： 自动处理日期，支持缩放和平移
• 支持导出： 支持 PNG、SVG、PDF 导出和打印
• 独立架构： 适用于 Angular 19+ 独立组件

文档与导航指南

API 参考

📄 阅读： references/api-reference.md

入门与设置

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-charts 软件包
• 初始模块导入和提供程序
• 创建第一个股票图表
• 绑定来自 JSON、API 或 DataManager 的数据
• 验证设置是否正常运行

系列配置

📄 阅读： references/series-types.md

• 了解 7 种系列类型（Candle、HiLo、Line、Area 等）
• 了解不同数据适用的系列类型
• 配置系列属性和颜色
• 动态切换系列类型
• 多系列图表

坐标轴自定义

📄 阅读： references/axis-customization.md

• 用于时间序列数据的 DateTime 坐标轴
• 数值坐标轴和对数坐标轴
• 坐标轴标签、标题和范围
• 十字准线和工具提示配置
• 范围缩放和平移

图例与样式

📄 阅读： references/legend.md

• 启用图例并设置其位置
• 图例对齐方式和大小
• 自定义图标形状
• 切换系列可见性
• 图例交互模式

交互功能

📄 阅读： references/interactive-features.md

• 范围选择器（选择日期范围）
• 周期选择器（1M、3M、6M、1Y 快捷选项）
• 数据标签和格式
• 自定义工具提示
• 十字准线显示和交互
• 事件和用户操作

技术指标

📄 阅读： references/technical-indicators.md

• 添加技术指标（MA、BB、RSI、MACD 等）
• 指标计算参数
• 在同一图表上添加多个指标
• 自定义指标颜色和样式
• 移除或切换指标

导出和打印

📄 阅读： references/export-print.md

• 将图表导出为 PNG、SVG、PDF
• 打印预览功能
• 保存导出的文件
• 批量导出多个图表

高级功能与优化

📄 阅读： references/advanced-features.md

• 实时数据更新和实时刷新
• 无障碍支持（WCAG、ARIA、键盘导航）
• 国际化与本地化
• 趋势线和注释
• 大型数据集的性能优化

快速开始

最简股票图表设置

import { Component, ViewEncapsulation } from '@angular/core';
import { ChartAllModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [ChartAllModule, StockChartAllModule],
    standalone: true,
    selector: 'app-stock-chart',
    template: `
        <ejs-stockchart id='stockchart-container' [dataSource]='data'>
            <e-stockchart-series-collection>
                <e-stockchart-series [dataSource]='data' type='Candle' 
                    xName='x' high='high' low='low' 
                    open='open' close='close'>
                </e-stockchart-series>
            </e-stockchart-series-collection>
        </ejs-stockchart>
    `,
    encapsulation: ViewEncapsulation.None
})
export class StockChartComponent {
    data: any[] = [
        { x: new Date(2023, 0, 1), open: 100, high: 105, low: 95, close: 102 },
        { x: new Date(2023, 0, 2), open: 102, high: 108, low: 100, close: 105 },
        { x: new Date(2023, 0, 3), open: 105, high: 110, low: 103, close: 108 }
    ];
}

常见模式

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

将 OHLC 数据渲染为蜡烛图，并在 x 轴上自动设置日期格式。

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle' xName='date' 
            high='high' low='low' open='open' close='close'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景： 显示股票 OHLC 数据、分析价格形态
原因： 蜡烛图一目了然地展示开盘价与收盘价的关系

模式 2：带范围选择器的多序列图

通过选择日期范围比较不同的指标或交易品种。

<ejs-stockchart [rangeSelector]='{ periods: [{text: "1M", interval: 1, intervalType: "Months"}, 
    {text: "1Y", interval: 1, intervalType: "Years"}] }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
        <e-stockchart-series type='Line'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景： 用户需要查看不同时间窗口、分析趋势
原因： 快速切换周期可提升探索效率

模式 3：添加技术指标

在价格数据上叠加显示移动平均线。

<ejs-stockchart>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
    <e-indicators>
        <e-indicator type='Sma' field='close' period='14' seriesName='SMA'></e-indicator>
    </e-indicators>
</ejs-stockchart>

适用场景： 添加移动平均线、RSI 或其他技术分析指标
原因： 指标有助于识别趋势和信号

模式 4：交互式十字准线和工具提示

启用悬停时的详细数值检查。

<ejs-stockchart [crosshair]='{ enable: true, lineType: "Vertical" }' 
    [tooltip]='{ enable: true }'>
    <e-stockchart-series-collection>
        <e-stockchart-series type='Candle'></e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>

适用场景： 用户需要精确检查数值
原因： 降低认知负担，帮助发现数据

关键属性

序列配置

• type：序列渲染类型（蜡烛图、折线图、面积图、HiLo 等）
• xName：x 轴的数据字段（日期）
• high、low、open、close：OHLC 数据字段
• dataSource：数据点数组或 DataManager

图表显示

• height、width：图表尺寸
• title：图表标题
• legendSettings：图例的位置和外观
• tooltip：悬停时显示的数值
• crosshair：十字准线的显示和行为

交互功能

• rangeSelector：日期范围选择按钮
• periodSelector：快速周期按钮（1M、1Y 等）
• zoomSettings：图表缩放配置
• chartArea：图表绘制区域尺寸

轴配置

• primaryXAxis：x 轴（通常为日期／时间）
• primaryYAxis：y 轴（价格值）
• secondaryYAxis：可选的指标辅助 y 轴

常见用例

用例 1：股票分析仪表板

并排显示多只股票，并使用范围选择器比较不同周期内的表现。技术指标（MA、RSI）有助于识别趋势强度。

用例 2：实时加密货币追踪器

随着新的价格蜡烛形成，每隔几秒更新一次图表数据。实时范围选择器会更新以包含最新数据。工具提示显示实时买卖价差。

用例 3：历史数据分析

加载完整的历史数据集（数月／数年）。缩放和平移功能可详细查看特定时段。导出功能可让用户保存分析结果。

用例 4：多指标技术分析

在同一价格图表上叠加多个技术指标。不同数值范围使用独立的坐标轴。通过图例交互切换指标的显示。