syncfusion-blazor-stock-charts

实现股票图表

NuGet： Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes（或使用单独的包 Syncfusion.Blazor.StockChart） 命名空间： Syncfusion.Blazor.Charts

这是一份全面的指南，介绍如何实现用于金融数据可视化的 Syncfusion Blazor 股票图表组件。股票图表专为展示股票市场数据而设计，内置技术分析、基于时间的导航和金融指标等功能。

何时使用此指南

在以下情况下，请立即使用此指南：

• 展示包含 OHLC（开盘价、最高价、最低价、收盘价）值的股票市场价格数据
• 创建用于金融数据的蜡烛图、折线图或 OHLC 图表
• 添加技术指标（SMA、EMA、MACD、RSI、布林带、ATR、随机指标）
• 实现周期选择器（1M、3M、6M、YTD、1Y、All），用于基于时间的导航
• 添加范围选择器，以自定义日期范围
• 展示股票事件（财报、股息、股票拆分）
• 为金融数据添加趋势线（线性、指数、多项式）
• 启用缩放、平移和十字准线，以便探索数据
• 将股票图表导出为 PNG、JPEG、SVG 或 PDF 格式
• 构建投资组合仪表板或交易应用
• 可视化加密货币价格数据或任何时间序列金融数据
• 为 Blazor Server、WebAssembly 或 Web App 创建响应式金融数据可视化

组件概览

Syncfusion Blazor 股票图表（SfStockChart）是一款功能丰富的金融图表组件，在标准图表功能的基础上扩展了以下特性：

• 5 种核心系列类型：折线、样条线、蜡烛、HiloOpenClose、Hilo
• 空心蜡烛模式：通过蜡烛配置启用实心或空心蜡烛渲染
• 9 种以上技术指标：SMA、EMA、MACD、RSI、布林带、ATR 等
• 时间导航：包含预设范围的周期选择器，以及用于自定义日期的范围选择器
• 股票事件：标记重要日期（财报、股息、拆分）
• 趋势分析：支持预测的多种趋势线类型
• 交互功能：缩放、平移、十字准线、追踪球提示框
• 导出选项：支持导出为 PNG、JPEG、SVG、PDF 以及打印
• 无障碍访问：符合 WCAG 标准，支持键盘导航

文档和导航指南

入门

📄 阅读： references/getting-started.md

从这里开始，了解安装、设置以及如何创建第一个股票图表。内容包括：

• 安装 Syncfusion.Blazor.Charts NuGet 包
• 设置 Blazor Server、WebAssembly 和 Web App
• 服务注册和主题配置
• 使用示例数据实现基本的 SfStockChart
• 项目结构和脚本引用

核心图表功能

系列类型和渲染

📄 阅读： references/series-types.md

了解用于股票数据可视化的 5 种核心系列类型：

• 用于趋势可视化的折线和样条线系列
• 用于传统股票图表的蜡烛系列，可通过蜡烛配置启用空心蜡烛渲染
• 用于显示价格范围的 HiloOpenClose 和 Hilo
• 用于在运行时切换类型的系列选择器
• 如何为数据选择合适的系列类型

数据绑定和结构

📄 阅读： references/working-with-data.md

为股票图表配置数据源：

• OHLC 数据结构（开盘价、最高价、最低价、收盘价、成交量）
• 基于 DateTime 的数据绑定
• 使用 API 进行远程数据绑定
• 适用于不同数据源的数据适配器
• 高效处理大型数据集

坐标轴配置

📄 阅读： references/axes.md

自定义金融数据的 X 轴和 Y 轴：

• DateTime、DateTimeCategory 和 Logarithmic 轴类型
• 轴标题、标签和格式
• 刻度线和网格线自定义
• 用于成交量或指标叠加的多个坐标轴
• 反向坐标轴和对置定位

金融分析功能

周期和范围选择器

📄 阅读： references/period-range-selectors.md

实现基于时间的导航：

• 带预设按钮（1M、3M、6M、YTD、1Y、All）的周期选择器
• 自定义周期按钮配置
• 用于拖动日期范围的范围选择器
• 选择器的样式和定位
• 处理周期变更事件

技术指标

📄 阅读： references/technical-indicators.md

添加金融分析指标：

• 简单移动平均线（SMA）和指数移动平均线（EMA）
• MACD（移动平均收敛发散指标）
• 用于衡量动量的 RSI（相对强弱指数）
• 用于波动性分析的布林带
• ATR、累积派发指标、随机指标
• 叠加多个指标
• 自定义指标外观

股票事件

📄 阅读： references/stock-events.md

在图表上标记重要日期：

• 添加业绩公告、股息、股票拆分
• 自定义事件形状和图标
• 事件定位和样式
• 事件的工具提示内容
• 在同一图表上显示多个事件

趋势线

📄 阅读： references/trend-lines.md

为数据序列添加趋势分析：

• 线性、指数、对数、多项式趋势
• 移动平均趋势线
• 使用向前／向后周期进行预测
• 自定义趋势线外观
• 每个数据序列支持多条趋势线

交互功能

缩放、平移和十字准线

📄 阅读： references/zooming-panning-crosshair.md

启用用户交互以探索数据：

• 选区缩放、捏合缩放、鼠标滚轮缩放
• 带重置功能的缩放工具栏
• 用于浏览缩放后数据的平移模式
• 用于精确读取数值的十字准线
• 用于比较多个数据点的跟踪球模式
• 自定义缩放和十字准线外观

工具提示和图例

📄 阅读： references/tooltip-legend.md

悬停时显示数据详情：

• 工具提示配置和格式设置
• 自定义工具提示模板
• 多个数据序列共用工具提示
• 图例定位和自定义
• 通过图例切换数据序列的可见性
• 图例点击事件

自定义和样式

外观自定义

📄 阅读： references/appearance-customization.md

自定义视觉设计：

• 股票图表标题和副标题
• 内置主题（Material、Bootstrap、Fluent、Tailwind 等）
• 图表尺寸（宽度、高度、自适应）
• 数据序列的渐变填充
• 显示最后一个数据标签
• 边框、背景和边距设置
• 自定义 CSS 样式

导出和打印

📄 阅读： references/export-print.md

导出图表以用于报告和分享：

• 导出为 PNG、JPEG、SVG、PDF 格式
• 导出配置和自定义
• 使用专属打印样式进行打印
• 通过编程方式或 UI 按钮导出

高级主题

事件

📄 阅读： references/events.md

处理 StockChartEvents 提供的股票图表事件：

• OnLoaded，用于渲染后初始化
• OnPointClick，用于数据点选择场景
• AxisLabelRendering，用于自定义坐标轴标签
• PeriodChanged 和 RangeChange，用于更新时间导航
• OnZooming，用于处理缩放交互
• TooltipRendering 和 SharedTooltipRendering，用于自定义工具提示
• Exporting、ExportCompleted 和 OnPrintComplete，用于输出工作流

无障碍访问

📄 阅读： references/accessibility.md

确保金融图表具备无障碍访问能力：

• 符合 WCAG 2.0 的功能
• WAI-ARIA 属性
• 键盘导航支持
• 兼容屏幕阅读器
• 支持高对比度主题
• 焦点管理最佳实践

快速入门示例

以下是一个包含蜡烛图数据序列和周期选择器的简易股票图表示例：

@page "/stock-chart"
@using Syncfusion.Blazor.Charts

<SfStockChart Title="AAPL Stock Price" Height="450px">
    <StockChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
    </StockChartPrimaryXAxis>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle" 
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartPeriods>
        <StockChartPeriod Text="1M" Interval="1" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="3M" Interval="3" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="6M" Interval="6" IntervalType="RangeIntervalType.Months"></StockChartPeriod>
        <StockChartPeriod Text="1Y" Interval="1" IntervalType="RangeIntervalType.Years"></StockChartPeriod>
        <StockChartPeriod Text="All"></StockChartPeriod>
    </StockChartPeriods>
</SfStockChart>

@code {
    public class StockInfo
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }

    public List<StockInfo> StockData = new List<StockInfo>
    {
        new StockInfo { Date = new DateTime(2024, 01, 01), Open = 175.5, High = 180.2, Low = 174.8, Close = 179.5, Volume = 12000000 },
        new StockInfo { Date = new DateTime(2024, 02, 01), Open = 179.5, High = 185.3, Low = 178.1, Close = 183.7, Volume = 15000000 },
        new StockInfo { Date = new DateTime(2024, 03, 01), Open = 183.7, High = 190.5, Low = 182.5, Close = 188.2, Volume = 18000000 },
        // Add more data points...
    };
}

常见用例

1. 带技术指标的股票价格仪表板

<SfStockChart Title="Stock Analysis with SMA and RSI">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartIndicators>
        <StockChartIndicator Type="TechnicalIndicators.Sma" Period="14" Field="FinancialDataFields.Close">
        </StockChartIndicator>
        <StockChartIndicator Type="TechnicalIndicators.Rsi" Period="14" ShowZones="true">
        </StockChartIndicator>
    </StockChartIndicators>
</SfStockChart>

适用场景： 投资分析仪表板、交易平台、投资组合监控

2. 多系列比较（例如，比较多只股票）

<SfStockChart Title="Tech Stocks Comparison">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@AppleData" Type="ChartSeriesType.Line" Name="AAPL"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@MicrosoftData" Type="ChartSeriesType.Line" Name="MSFT"
                          XName="Date" YName="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@GoogleData" Type="ChartSeriesType.Line" Name="GOOGL"
                          XName="Date" YName="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

适用场景： 投资组合比较、行业分析、与指数进行基准比较

3. 包含财报和股息的股票事件

<SfStockChart Title="AAPL with Corporate Events">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
    
    <StockChartEvents>
        <StockChartEvent Date="new DateTime(2024, 02, 01)" Text="Q1 Earnings" Type="@SplineType.Circle">
        </StockChartEvent>
        <StockChartEvent Date="new DateTime(2024, 03, 15)" Text="Dividend $0.24" Type="@SplineType.Square">
        </StockChartEvent>
    </StockChartEvents>
</SfStockChart>

适用场景： 基本面分析、事件驱动型交易、企业日历可视化

4. 带成交量的加密货币价格图表

<SfStockChart Title="Bitcoin Price and Volume">
    <StockChartRows>
        <StockChartRow Height="70%"></StockChartRow>
        <StockChartRow Height="30%"></StockChartRow>
    </StockChartRows>
    
    <StockChartAxes>
        <StockChartAxis Name="VolumeAxis" OpposedPosition="true" RowIndex="1">
        </StockChartAxis>
    </StockChartAxes>
    
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
        <StockChartSeries DataSource="@BitcoinData" Type="ChartSeriesType.Column" Name="Volume"
                          XName="Date" YName="Volume" YAxisName="VolumeAxis">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

适用场景： 加密货币跟踪、7×24 小时市场可视化、数字资产投资组合

5. 将股票图表导出为 PDF 报告

@using Syncfusion.Blazor.Charts

<button class="btn btn-primary" @onclick="ExportChart">Export to PDF</button>

<SfStockChart @ref="StockChartRef" Title="Annual Stock Performance">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockData" Type="ChartSeriesType.Candle"
                          XName="Date" High="High" Low="Low" Open="Open" Close="Close">
        </StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    SfStockChart StockChartRef;
    
    private async Task ExportChart()
    {
        await StockChartRef.ExportAsync(ExportType.PDF, "StockReport");
    }
}

适用场景： 财务报告、投资者演示文稿、自动化报告系统

关键配置属性

股票图表的必需属性

属性	类型	用途
Title	string	图表主标题
Height / Width	string	图表尺寸（例如，“450px”、“100%”）
Theme	Theme	视觉主题（Material、Bootstrap、Fluent 等）
EnablePeriodSelector	bool	显示/隐藏周期选择器（默认值：true）
EnableSelector	bool	显示/隐藏范围选择器（默认值：true）
EnableCustomRange	bool	允许输入自定义日期范围

官方 API 参考

📄 阅读： references/api-reference.md

此页面概述了已验证的 SfStockChart API 范围，包括：

• 核心属性，例如 Background、DataSource、SeriesType、IndicatorType、TrendlineType、Theme、Title、Height 和 Width
• 方法，例如 ExportAsync()、PrintAsync()、Refresh() 和 UpdateStockChart()
• 子组件，例如 StockChartSeriesCollection、StockChartIndicators、StockChartTrendlines、StockChartPeriods、StockChartEvents 和 StockChartAxes

系列配置

属性	类型	用途
Type	ChartSeriesType	系列类型（Candle、Line、Hilo 等）
DataSource	object	数据集合
XName	string	X 轴的属性名称（日期）
High / Low / Open / Close	string	OHLC 属性名称
YName	string	Line/Spline 系列的属性
Fill	string	系列颜色

周期选择器属性

属性	类型	用途
Text	string	按钮标签（例如，“1M”、“6M”、“1Y”）
Interval	int	区间数量
IntervalType	RangeIntervalType	天、月、年
Selected	bool	默认选中的周期

后续步骤

1. 从快速入门开始，了解安装和基本设置
2. 从系列类型中选择系列类型
3. 从技术指标中添加技术指标
4. 使用周期和范围选择器实现时间导航
5. 使用外观自定义自定义外观

如有问题，请参阅无障碍了解合规要求，或参阅事件了解如何处理用户交互。