syncfusion-blazor-stock-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Stock Charts

实现股票图表

A comprehensive skill for implementing Syncfusion Blazor Stock Chart components for financial data visualization. The Stock Chart is specifically designed for visualizing stock market data with built-in features for technical analysis, time-based navigation, and financial indicators.

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

When to Use This Skill

何时使用此技能

Use this skill immediately when you need to:

Display stock market price data with OHLC (Open, High, Low, Close) values
Create candlestick, line, or OHLC charts for financial data
Add technical indicators (SMA, EMA, MACD, RSI, Bollinger Bands, ATR, Stochastic)
Implement period selectors (1M, 3M, 6M, YTD, 1Y, All) for time-based navigation
Add range selectors for custom date range selection
Display stock events (earnings, dividends, stock splits)
Add trend lines (linear, exponential, polynomial) to financial data
Enable zooming, panning, and crosshair for data exploration
Export stock charts to PNG, JPEG, SVG, or PDF formats
Build investment portfolio dashboards or trading applications
Visualize cryptocurrency price data or any time-series financial data
Create responsive financial data visualizations for Blazor Server, WebAssembly, or Web App

当你需要以下功能时，立即使用此技能：

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

Component Overview

组件概述

The Syncfusion Blazor Stock Chart (

SfStockChart

) is a feature-rich financial charting component that extends standard charting capabilities with:

5 Core Series Types: Line, Spline, Candle, HiloOpenClose, Hilo
Hollow Candle Mode: Enable solid or hollow candle rendering through candle configuration
9+ Technical Indicators: SMA, EMA, MACD, RSI, Bollinger Bands, ATR, and more
Time Navigation: Period selector with preset ranges, Range selector for custom dates
Stock Events: Mark important dates (earnings, dividends, splits)
Trend Analysis: Multiple trend line types with forecasting
Interactive Features: Zooming, panning, crosshair, trackball tooltips
Export Options: PNG, JPEG, SVG, PDF export and print
Accessibility: WCAG compliant with keyboard navigation

Syncfusion Blazor Stock Chart（

SfStockChart

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

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

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Start here for installation, setup, and your first stock chart. Covers:

Installing Syncfusion.Blazor.Charts NuGet package
Blazor Server, WebAssembly, and Web App setup
Service registration and theme configuration
Basic SfStockChart implementation with sample data
Project structure and script references

📄 阅读： references/getting-started.md

从这里开始学习安装、设置和创建你的第一个股票图表。涵盖内容：

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

Core Chart Features

核心图表功能

Series Types and Rendering

系列类型与渲染

📄 Read: references/series-types.md

Learn about the 5 core series types for stock data visualization:

Line and Spline series for trend visualization
Candle series for traditional stock charts, with hollow candle rendering available through candle configuration
HiloOpenClose and Hilo for price range display
Series selector for runtime switching between types
Choosing the right series type for your data

📄 阅读： references/series-types.md

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

用于趋势可视化的折线图和样条线图
传统股票图表的K线图，可通过K线配置启用空心K线渲染
用于价格范围展示的高低开收盘图和高低图
用于运行时切换类型的系列选择器
为你的数据选择合适的系列类型

Data Binding and Structure

数据绑定与结构

📄 Read: references/working-with-data.md

Configure data sources for stock charts:

OHLC data structure (Open, High, Low, Close, Volume)
DateTime-based data binding
Remote data binding with APIs
Data adapters for different sources
Handling large datasets efficiently

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

配置股票图表的数据源：

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

Axis Configuration

轴配置

📄 Read: references/axes.md

Customize X and Y axes for financial data:

DateTime, DateTimeCategory, and Logarithmic axis types
Axis titles, labels, and formatting
Tick lines and grid line customization
Multiple axes for volume or indicator overlays
Inversed axis and opposed positioning

📄 阅读： references/axes.md

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

DateTime、DateTimeCategory和对数轴类型
轴标题、标签和格式化
刻度线和网格线自定义
用于成交量或指标叠加的多轴
反转轴和对立定位

Financial Analysis Features

金融分析功能

Period and Range Selectors

周期与范围选择器

📄 Read: references/period-range-selectors.md

Implement time-based navigation:

Period selector with preset buttons (1M, 3M, 6M, YTD, 1Y, All)
Custom period button configuration
Range selector for dragging date ranges
Styling and positioning selectors
Handling period change events

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

实现基于时间的导航：

带预设按钮的周期选择器（1月、3月、6月、年初至今、1年、全部）
自定义周期按钮配置
用于拖动日期范围的范围选择器
选择器的样式和定位
处理周期变更事件

Technical Indicators

技术指标

📄 Read: references/technical-indicators.md

Add financial analysis indicators:

Simple Moving Average (SMA) and Exponential Moving Average (EMA)
MACD (Moving Average Convergence Divergence)
RSI (Relative Strength Index) for momentum
Bollinger Bands for volatility analysis
ATR, Accumulation Distribution, Stochastic
Overlaying multiple indicators
Customizing indicator appearance

📄 阅读： references/technical-indicators.md

添加金融分析指标：

简单移动平均线（SMA）和指数移动平均线（EMA）
指数平滑异同移动平均线（MACD）
用于动量分析的相对强弱指数（RSI）
用于波动率分析的布林带
ATR、累积分配线、随机指标
叠加多个指标
自定义指标外观

Stock Events

股票事件

📄 Read: references/stock-events.md

Mark important dates on the chart:

Adding earnings announcements, dividends, stock splits
Custom event shapes and icons
Event positioning and styling
Tooltip content for events
Multiple events on the same chart

📄 阅读： references/stock-events.md

在图表上标记重要日期：

添加财报发布、分红、拆股事件
自定义事件形状和图标
事件定位和样式
事件的工具提示内容
在同一图表上添加多个事件

Trend Lines

趋势线

📄 Read: references/trend-lines.md

Add trend analysis to series:

Linear, Exponential, Logarithmic, Polynomial trends
Moving average trend lines
Forecasting with forward/backward periods
Customizing trend line appearance
Multiple trend lines per series

📄 阅读： references/trend-lines.md

为系列添加趋势分析：

线性、指数、对数、多项式趋势线
移动平均趋势线
向前/向后周期预测
自定义趋势线外观
每个系列添加多条趋势线

Interactive Features

交互功能

Zooming, Panning, and Crosshair

缩放、平移与十字线

📄 Read: references/zooming-panning-crosshair.md

Enable user interaction for data exploration:

Selection zoom, pinch zoom, mouse wheel zoom
Zoom toolbar with reset functionality
Pan mode for navigating zoomed data
Crosshair for precise value reading
Trackball mode for comparing multiple points
Customizing zoom and crosshair appearance

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

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

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

Tooltips and Legend

工具提示与图例

📄 Read: references/tooltip-legend.md

Display data details on hover:

Tooltip configuration and formatting
Custom tooltip templates
Shared tooltips for multiple series
Legend positioning and customization
Toggle series visibility from legend
Legend click events

📄 阅读： references/tooltip-legend.md

在悬停时显示数据详情：

工具提示配置和格式化
自定义工具提示模板
多系列共享工具提示
图例定位和自定义
通过图例切换系列可见性
图例点击事件

Customization and Styling

自定义与样式

Appearance Customization

外观自定义

📄 Read: references/appearance-customization.md

Customize the visual design:

Stock chart title and subtitle
Built-in themes (Material, Bootstrap, Fluent, Tailwind, etc.)
Chart dimensions (width, height, responsive)
Gradient fills for series
Last data label display
Border, background, and margin settings
Custom CSS styling

📄 阅读： references/appearance-customization.md

自定义视觉设计：

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

Export and Print

导出与打印

📄 Read: references/export-print.md

Export charts for reports and sharing:

Export to PNG, JPEG, SVG, PDF formats
Export configuration and customization
Print functionality with print-specific styling
Exporting programmatically or via UI button

📄 阅读： references/export-print.md

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

导出为PNG、JPEG、SVG、PDF格式
导出配置和自定义
带打印特定样式的打印功能
通过编程或UI按钮导出

Advanced Topics

高级主题

Events

事件

📄 Read: references/events.md

Handle stock chart events exposed by

StockChartEvents

```
OnLoaded
```
for post-render initialization
```
OnPointClick
```
for point selection scenarios
```
AxisLabelRendering
```
for axis label customization
```
PeriodChanged
```
and
```
RangeChange
```
for time navigation updates
```
OnZooming
```
for zoom interaction handling
```
TooltipRendering
```
and
```
SharedTooltipRendering
```
for tooltip customization
```
Exporting
```
,
```
ExportCompleted
```
, and
```
OnPrintComplete
```
for output workflows

📄 阅读： references/events.md

处理

StockChartEvents

暴露的股票图表事件：

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

Accessibility

无障碍支持

📄 Read: references/accessibility.md

Ensure accessible financial charts:

WCAG 2.0 compliance features
WAI-ARIA attributes
Keyboard navigation support
Screen reader compatibility
High contrast theme support
Focus management best practices

📄 阅读： references/accessibility.md

确保金融图表的无障碍性：

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

Quick Start Example

快速入门示例

Here's a minimal stock chart with candlestick series and period selector:

cshtml

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

以下是一个包含K线图系列和周期选择器的最简股票图表：

cshtml

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

Common Use Cases

常见用例

1. Stock Price Dashboard with Technical Indicators

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

cshtml

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

When to use: Investment analysis dashboards, trading platforms, portfolio monitoring

cshtml

<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. Multiple Series Comparison (e.g., Compare Multiple Stocks)

2. 多系列对比（如对比多只股票）

cshtml

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

When to use: Portfolio comparison, sector analysis, benchmarking against indices

cshtml

<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. Stock Events with Earnings and Dividends

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

cshtml

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

When to use: Fundamental analysis, event-driven trading, corporate calendar visualization

cshtml

<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. Cryptocurrency Price Chart with Volume

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

cshtml

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

When to use: Cryptocurrency tracking, 24/7 market visualization, digital asset portfolios

cshtml

<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. Export Stock Chart to PDF Report

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

cshtml

@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");
    }
}

When to use: Financial reports, investor presentations, automated reporting systems

cshtml

@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");
    }
}

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

Key Configuration Properties

关键配置属性

Essential Props for Stock Charts

股票图表必备属性

Property	Type	Purpose
`Title`	string	Main chart title
`Height` / `Width`	string	Chart dimensions (e.g., "450px", "100%")
`Theme`	Theme	Visual theme (Material, Bootstrap, Fluent, etc.)
`EnablePeriodSelector`	bool	Show/hide period selector (default: true)
`EnableSelector`	bool	Show/hide range selector (default: true)
`EnableCustomRange`	bool	Allow custom date range input

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

Official API Reference

官方API参考

📄 Read: references/api-reference.md

This page summarizes the validated

SfStockChart

API surface, including:

Core properties such as

Background

DataSource

SeriesType

IndicatorType

TrendlineType

Theme

Title

Height

, and

Width

Methods such as

ExportAsync()

PrintAsync()

Refresh()

, and

UpdateStockChart()

Child components such as

StockChartSeriesCollection

StockChartIndicators

StockChartTrendlines

StockChartPeriods

StockChartEvents

, and

StockChartAxes

📄 阅读： 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

Series Configuration

系列配置

Property	Type	Purpose
`Type`	ChartSeriesType	Series type (Candle, Line, Hilo, etc.)
`DataSource`	object	Data collection
`XName`	string	Property name for X-axis (Date)
`High` / `Low` / `Open` / `Close`	string	OHLC property names
`YName`	string	Property for Line/Spline series
`Fill`	string	Series color

属性	类型	用途
`Type`	ChartSeriesType	系列类型（K线图、折线图、高低图等）
`DataSource`	object	数据集合
`XName`	string	X轴属性名称（日期）
`High` / `Low` / `Open` / `Close`	string	OHLC属性名称
`YName`	string	折线/样条线系列的属性
`Fill`	string	系列颜色

Period Selector Props

周期选择器属性

Property	Type	Purpose
`Text`	string	Button label (e.g., "1M", "6M", "1Y")
`Interval`	int	Number of intervals
`IntervalType`	RangeIntervalType	Days, Months, Years
`Selected`	bool	Default selected period

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

Next Steps

下一步

Start with Getting Started for installation and basic setup
Choose your series type from Series Types
Add technical indicators from Technical Indicators
Implement time navigation with Period and Range Selectors
Customize appearance using Appearance Customization

For questions or issues, refer to Accessibility for compliance requirements or Events for handling user interactions.

**从入门指南**开始学习安装和基础设置
**从系列类型**中选择你的系列类型
**从技术指标**添加技术指标
**使用周期与范围选择器**实现时间导航
**使用外观自定义**自定义外观

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