syncfusion-react-stock-chart

实现 Syncfusion React 股票图表

Stock Chart 组件是一种专用的金融图表，用于可视化股票价格随时间的变化。它提供了金融数据分析所需的基本功能，包括蜡烛图/OHLC 可视化、用于快速浏览日期范围的周期选择器、用于精准筛选数据的范围选择器、技术指标，以及工具提示和十字准线等交互工具。

何时使用此技能

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

• 可视化金融/股票数据 - 显示股票价格、交易量和市场走势
• 显示 OHLC 数据 - 使用蜡烛图或 Hilo 图显示开盘价、最高价、最低价和收盘价
• 实现周期导航 - 添加快速时间范围按钮（1D、5D、1M、6M、YTD、1Y、ALL）
• 启用范围选择 - 允许用户通过滑块导航选择特定日期范围
• 添加技术分析 - 包含技术指标（SMA、EMA、RSI、MACD 等）
• 显示股票事件 - 可视化财报、股息、拆股或其他市场事件
• 创建金融仪表板 - 构建全面的股票分析界面
• 显示时间序列数据 - 显示任何基于日期时间的金融或交易数据

组件概览

包： @syncfusion/ej2-react-charts
组件： StockChartComponent
主要功能：

• 6 种序列类型（Line、Spline、Hilo、HiloOpenClose、Candle、Hollow Candle）
• 内置周期选择器，可快速浏览日期范围
• 带滑块控件的范围导航器，可精准选择范围
• 技术指标（20 多种类型）及 indicatorType 支持
• 股票事件标注（stockEvents）和 stockEventRender
• 交互式工具提示、十字准线（追踪球）和图例
• 选择和交互：selectionMode、isMultiSelect、selectedDataIndexes
• 缩放和平移（zoomSettings、onZooming）
• 导出为图像/PDF 和打印功能（exportType、Export、Print）
• 持久化和 RTL 支持（enablePersistence、enableRtl）
• 响应式且易于访问（WCAG、ARIA、键盘导航）

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

首次设置请先阅读此文档：

• 安装 @syncfusion/ej2-react-charts 包
• 使用 Vite 或 create-react-app 设置项目
• 基本的 StockChartComponent 实现
• 模块注入模式（注入服务）
• 使用示例数据创建第一个图表
• 了解数据结构（x、open、high、low、close、volume）
• 添加图表标题和基本配置

坐标轴类型与配置

📄 阅读： references/configuration.md

了解如何配置和自定义坐标轴：

• DateTime Axis - 基于日期/时间的 x 轴（股票图表中最常见）
• DateTimeCategory Axis - 仅显示工作日（排除周末/节假日）
• Logarithmic Axis - 用于较大数值范围的对数刻度
• Numeric Axis - 用于 y 值的标准数值坐标轴
• 坐标轴标题、标签和格式
• 网格线和刻度自定义
• 用于不同数据刻度的多个 Y 轴
• 坐标轴范围和留白设置

序列类型与可视化

📄 阅读： references/series-types.md

了解如何选择和配置图表序列：

• Line series - 连续价格线
• Spline series - 平滑曲线
• Hilo series - 最高价-最低价范围柱
• HiloOpenClose series - OHLC 柱
• Candle series - 传统蜡烛图（股票图表的默认类型）
• Hollow Candle series - 根据价格走势显示实心或空心
• 蜡烛图的空头/多头填充颜色
• 序列下拉导航和类型切换
• 各序列类型的模块注入
• 各类型的适用场景

周期和范围选择器

📄 阅读： references/selectors.md

用于实现时间范围导航：

• 周期选择器： 快速导航按钮（1D、5D、1M 等）
  • 周期数组配置（interval、text、intervalType）
  • IntervalType 选项（Years、Months、Weeks、Days、Hours 等）
  • 启用/禁用周期选择器
• 范围选择器： 使用滑块进行精确范围选择
  • 滑块导航和拖动
  • 点击标签选择范围
  • 日期范围按钮集成
  • 启用/禁用范围选择器

交互功能和事件

📄 阅读： references/interactive-features.md

用于添加用户交互和视觉反馈：

• 图例： 显示系列信息
  • 位置和对齐方式选项（Top、Bottom、Left、Right、Custom）
  • 自定义（大小、形状、颜色、图标）
  • 图例标题和模板
  • 图例点击/渲染事件
• 工具提示： 悬停时显示数据点信息
  • 使用标记（${point.x}、${point.open} 等）自定义格式
  • 位置控制（Auto、Nearest）
  • 外观样式（fill、border、textStyle）
  • 多系列共享工具提示
  • 标题和自定义格式
• 十字准线： 垂直/水平线，用于精确读取数值
  • 十字准线工具提示，用于显示两个轴上的轴值
  • 线条自定义（width、color、dashArray）
  • 吸附到数据点，实现更流畅的交互
  • Trackball 模式，可在多个系列间共享工具提示
  • 线条类型（Both、Vertical、Horizontal）
• 鼠标事件： 全面的交互跟踪
  • pointClick、pointMove，用于数据点交互
  • stockChartMouseMove、stockChartMouseClick 等
  • stockChartMouseLeave，用于清理 UI
  • 用于更新选择器的范围变更事件

技术分析工具

📄 阅读： references/technical-analysis.md

用于金融分析功能：

• 股票事件： 标注重要的市场事件
  • 事件类型（Flag、Circle、Square、Triangle 等）
  • 可自定义颜色和形状的事件标记
  • 事件说明和工具提示
  • 针对特定系列的事件
  • stockEventRender 事件，用于自定义样式
  • 事件可见性控制
• 技术指标： 添加分析叠加层
  • 10 多种指标类型：
    • 移动平均线：SMA、EMA、TMA
    • 动量：RSI、MACD、Stochastic、Momentum
    • 成交量：Accumulation Distribution、ATR
    • 高级：Bollinger Bands
  • 指标配置和样式
  • 在一个图表上添加多个指标
  • 字段选择（Open、High、Low、Close）
  • 自定义周期和标准差
• 趋势线： 绘制趋势分析线
  • 6 种趋势线类型：Linear、Exponential、Logarithmic、Polynomial、Power、MovingAverage
  • 线条配置（起点/终点、系列绑定）
  • 样式和自定义（color、width、dashArray）
  • 每个系列可添加多条趋势线
  • 自定义多项式阶数
  • 配置移动平均周期

工具提示、十字准线和坐标轴配置

📄 阅读： references/interactive-features.md 和 references/configuration.md

用于配置工具提示和十字准线：

• 工具提示配置： 悬停时显示数据点信息
  • 使用 enable 属性启用/禁用
  • 用于显示 OHLC 数据的格式字符串
  • 背景颜色和边框样式
  • 自定义文本样式
  • 位置模式（Auto、Nearest）
• 十字准线： 精确读取数值
  • 使用 enable: true 启用十字准线
  • 线条类型：Both、Vertical 或 Horizontal
  • 线条自定义（width、color、dashArray）
  • 吸附到数据点对齐
  • 十字准线线条样式
• 坐标轴工具提示： 显示轴值
  • 通过 primaryXAxis 上的 crosshairTooltip 启用
  • 通过 primaryYAxis 上的 crosshairTooltip 启用
  • 自定义填充颜色和文本样式
  • 设置坐标轴值的显示格式

图表配置和样式

📄 阅读： references/configuration.md

用于自定义图表外观和行为：

• 坐标轴配置： 设置 X 轴和 Y 轴
  • 坐标轴类型：DateTime（默认）、DateTimeCategory、Logarithmic、Numeric
  • 标签格式和间隔
  • 支持使用 axes 数组配置多个坐标轴
  • 坐标轴范围、边距和网格线
  • 主/次刻度和网格自定义
• 图表尺寸： 控制大小
  • 宽度和高度属性（像素或百分比）
  • 响应式尺寸策略
  • 基于容器的尺寸设置
• 外观： 主题和样式
  • 内置主题（Material、Fabric、Bootstrap、HighContrast 等）
  • 背景和边框自定义
  • 图表区域样式
  • 边距和内边距配置
  • 标题和标题样式
• 渐变填充： 高级样式
  • 线性渐变（x1、y1、x2、y2 渐变节点）
  • 径向渐变（cx、cy、r 渐变节点）
  • 系列填充的渐变
  • SVG 渐变定义

导出、打印和无障碍支持

📄 阅读： references/utilities.md

用于导出功能和无障碍支持：

• 导出： 将图表保存为文件
  • 导出为 PNG、JPEG、SVG
  • 导出为 PDF
  • 配置选项
• 打印： 直接打印图表
  • 打印方法和选项
• 无障碍支持： 符合 WCAG 标准
  • 键盘导航
  • ARIA 属性
  • 屏幕阅读器支持
  • 无障碍配色方案

快速开始

基本股票图表

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, LineSeries, SplineSeries, 
         CandleSeries, HiloOpenCloseSeries, HiloSeries, 
         RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import * as React from 'react';

function App() {
  const data = [
    { x: new Date('2012-04-02'), open: 85.97, high: 90.58, low: 85.97, close: 90.58, volume: 660187068 },
    { x: new Date('2012-04-09'), open: 89.02, high: 92.50, low: 88.50, close: 92.90, volume: 490033264 },
    { x: new Date('2012-04-16'), open: 92.52, high: 93.00, low: 88.50, close: 92.52, volume: 450167016 },
    // ... more data
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='AAPL Stock Price'
      primaryXAxis={{ valueType: 'DateTime' }}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, 
                         SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, 
                         RangeAreaSeries, Trendlines]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
          volume='volume'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

export default App;

带周期选择器的股票图表

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries } from '@syncfusion/ej2-react-charts';

function App() {
  const data = [ /* stock data */ ];
  
  const periods = [
    { intervalType: 'Days', interval: 1, text: '1D' },
    { intervalType: 'Days', interval: 5, text: '5D' },
    { intervalType: 'Months', interval: 1, text: '1M' },
    { intervalType: 'Months', interval: 3, text: '3M' },
    { intervalType: 'Months', interval: 6, text: '6M' },
    { intervalType: 'Years', interval: 1, text: '1Y' },
    { text: 'All' }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      title='Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      periods={periods}
      enablePeriodSelector={true}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, CandleSeries]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={data} 
          type='Candle'
          xName='x'
          high='high' 
          low='low' 
          open='open' 
          close='close'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

股票图表的 CSS 样式

要使股票图表的周期选择器 UI 正常工作，需要在 HTML 文件中包含所需的 CSS 样式表。在 index.html 的 <head> 部分添加以下 <link> 标签：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet" />
    
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
    <title>Stock Chart App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

主要 CSS 样式表：

1. Syncfusion Tailwind CSS（tailwind3.css）——股票图表组件必需

   • 版本：33.1.44（更新为与你的 Syncfusion 版本一致）
   • 提供周期选择器按钮、范围导航器、工具提示及其他 UI 元素的样式
   • CDN URL：https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css

2. Bootstrap CSS ——可选，但建议用于提供额外的样式支持

   • 版本：3.3.7
   • 提供基础样式和布局工具
   • CDN URL：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

重要说明：

• 确保 Syncfusion CSS 版本与你的 @syncfusion/ej2-react-charts 包版本一致
• 如果使用其他主题（Material、Bootstrap、Fabric、HighContrast），请使用 Syncfusion CDN 中相应的 CSS 文件
• 将这些样式表放在其他自定义样式表之前，以确保 CSS 层叠和覆盖正常生效
• 如果没有这些样式表，周期选择器按钮、工具提示及其他 UI 元素可能无法正确呈现

按主题分类的备用 CSS URL：

• Material：https://cdn.syncfusion.com/ej2/33.1.44/material.css
• Bootstrap：https://cdn.syncfusion.com/ej2/33.1.44/bootstrap.css
• Fabric：https://cdn.syncfusion.com/ej2/33.1.44/fabric.css
• Tailwind：https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css
• HighContrast：https://cdn.syncfusion.com/ej2/33.1.44/highcontrast.css

坐标轴类型参考

股票图表支持多种坐标轴类型，以适用于不同的数据场景：

DateTime 坐标轴（默认）

用于基于日期的股票数据：

primaryXAxis={{ 
  valueType: 'DateTime',
  majorGridLines: { width: 0 },
  majorTickLines: { color: 'transparent' }
}}

最适用于： 带日期的股票价格数据 注入： DateTime 模块

DateTimeCategory 坐标轴

仅显示工作日（排除周末和节假日）：

primaryXAxis={{ 
  valueType: 'DateTimeCategory',
  majorGridLines: { width: 0 }
}}

最适用于： 仅包含交易日的数据 注入： DateTimeCategory 模块 注意： 需要导入并注入 DateTimeCategory 模块

Logarithmic 坐标轴

用于采用对数刻度的 Y 轴（适用于数值范围较大的情况）：

primaryYAxis={{
  valueType: 'Logarithmic',
  labelFormat: '${value}'
}}

最适用于： 跨越多个数量级的数据 注入： Logarithmic 模块 注意： 不能包含零值或负值

数值轴（默认 Y 轴）

标准线性数值刻度：

primaryYAxis={{
  valueType: 'Double',
  labelFormat: '${value}',
  minimum: 0,
  maximum: 500,
  interval: 50
}}

最适用于： 价格值和常规 Y 轴 无需注入模块 - 这是默认设置

多轴配置

为不同刻度使用多个 Y 轴：

<StockChartComponent
  primaryXAxis={{ valueType: 'DateTime' }}
  primaryYAxis={{ title: 'Price', labelFormat: '${value}' }}
>
  {/* Additional axes using StockChartAxesDirective */}
  <StockChartAxesDirective>
    <StockChartAxisDirective
      name='volumeAxis'
      opposedPosition={true}
      title='Volume'
      labelFormat='{value}M'
    />
  </StockChartAxesDirective>
  
  {/* Series bind to respective axes */}
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type='Candle' yAxisName='primaryYAxis' />
    <StockChartSeriesDirective type='Column' yAxisName='volumeAxis' />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>

常见模式

模式 1：具备多项功能的金融仪表板

import { StockChartComponent, StockChartSeriesCollectionDirective, 
         StockChartSeriesDirective, Inject, DateTime, Tooltip, 
         RangeTooltip, Crosshair, CandleSeries, StockLegend, 
         Export, Print } from '@syncfusion/ej2-react-charts';

function FinancialDashboard() {
  const handlePointClick = (args) => {
    console.log(`Point clicked: ${args.x}, Value: ${args.y}`);
  };

  const handleMouseMove = (args) => {
    console.log('Mouse moved over chart');
  };

  const handleRangeChange = (args) => {
    console.log(`Range changed: ${args.start} to ${args.end}`);
  };

  return (
    <StockChartComponent
      id='stockchart'
      title='Comprehensive Stock Analysis'
      primaryXAxis={{ valueType: 'DateTime' }}
      tooltip={{ enable: true, shared: true }}
      crosshair={{ enable: true }}
      legendSettings={{ visible: true }}
      enablePeriodSelector={true}
      enableSelector={true}
      pointClick={handlePointClick}
      stockChartMouseMove={handleMouseMove}
      rangeChange={handleRangeChange}
    >
      <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                         CandleSeries, StockLegend, Export, Print]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          name='Apple Inc'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

模式 2：带有熊市／牛市颜色和动画的蜡烛图

function StyledCandleChart() {
  const stockData = [ /* stock data with open, high, low, close */ ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      primaryYAxis={{ labelFormat: '${value}' }}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
          xName='x'
          open='open'
          high='high'
          low='low'
          close='close'
          bearFillColor='#ef5350'      // Red for downtrend
          bullFillColor='#26a69a'      // Green for uptrend
          animation={{ enable: true, duration: 500 }}
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

模式 3：技术分析图表

function TechnicalAnalysisChart() {
  const indicators = [
    {
      type: 'Sma',
      field: 'Close',
      period: 14,
      fill: 'blue'
    },
    {
      type: 'BollingerBands',
      field: 'Close',
      period: 20,
      standardDeviation: 2,
      upperLine: { color: '#ff0000', width: 1 },
      lowerLine: { color: '#ff0000', width: 1 }
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      indicators={indicators}
    >
      <Inject services={[DateTime, CandleSeries, Tooltip, 
                         LineSeries, RangeTooltip, SmaIndicator, BollingerBands]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
      <StockChartIndicatorsDirective>
        {/* Indicators can also be added here via directives */}
      </StockChartIndicatorsDirective>
    </StockChartComponent>
  );
}

模式 4：带轴提示框的十字准线

function CrosshairChart() {
  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ 
        valueType: 'DateTime',
        majorGridLines: { width: 0 },
        majorTickLines: { color: 'transparent' },
        crosshairTooltip: { enable: true }  // X-axis tooltip
      }}
      primaryYAxis={{
        labelFormat: 'n0',
        majorTickLines: { width: 0 },
        crosshairTooltip: { enable: true }  // Y-axis tooltip
      }}
      crosshair={{ 
        enable: true,
        lineType: 'Both',
        line: { width: 1, color: '#0080ff' }
      }}
      tooltip={{ enable: true }}
    >
      <Inject services={[DateTime, CandleSeries, Crosshair, Tooltip, RangeTooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Candle'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

模式 5：股票事件可视化

function StockEventsChart() {
  const stockEvents = [
    {
      date: new Date('2012-04-01'),
      text: 'Q1 Earnings',
      description: 'Quarterly earnings release',
      type: 'Flag',
      background: '#6c757d'
    },
    {
      date: new Date('2012-07-01'),
      text: 'Dividend',
      description: 'Dividend payout',
      type: 'Circle',
      background: '#28a745'
    }
  ];

  return (
    <StockChartComponent
      id='stockchart'
      primaryXAxis={{ valueType: 'DateTime' }}
      stockEvents={stockEvents}
    >
      <Inject services={[DateTime, SplineSeries, Tooltip]} />
      <StockChartSeriesCollectionDirective>
        <StockChartSeriesDirective 
          dataSource={stockData} 
          type='Spline'
        />
      </StockChartSeriesCollectionDirective>
    </StockChartComponent>
  );
}

模式 6：导出和打印

function ExportableChart() {
  const chartRef = useRef<StockChartComponent>(null);

  const handleExport = (type: string) => {
    if (chartRef.current) {
      chartRef.current.export(type, 'StockChart');
    }
  };

  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.print();
    }
  };

  return (
    <div>
      <div>
        <button onClick={() => handleExport('PNG')}>Export PNG</button>
        <button onClick={() => handleExport('JPEG')}>Export JPEG</button>
        <button onClick={() => handleExport('SVG')}>Export SVG</button>
        <button onClick={() => handleExport('PDF')}>Export PDF</button>
        <button onClick={handlePrint}>Print Chart</button>
      </div>
      
      <StockChartComponent
        ref={chartRef}
        id='stockchart'
        primaryXAxis={{ valueType: 'DateTime' }}
        exportType={['PNG', 'JPEG', 'SVG', 'PDF']}
      >
        <Inject services={[DateTime, CandleSeries, Export]} />
        <StockChartSeriesCollectionDirective>
          <StockChartSeriesDirective 
            dataSource={stockData} 
            type='Candle'
          />
        </StockChartSeriesCollectionDirective>
      </StockChartComponent>
    </div>
  );
}

关键属性

StockChartComponent

属性	类型	描述
primaryXAxis	Object	X 轴配置（通常为 DateTime）
primaryYAxis	Object	Y 轴配置
axes	Array	用于多轴缩放的其他 Y 轴
title	string	图表标题
titleStyle	Object	标题字体样式
periods	Array	周期选择器按钮配置
enablePeriodSelector	boolean	显示/隐藏周期选择器（默认：true）
enableSelector	boolean	显示/隐藏范围选择器（默认：true）
enableCustomRange	boolean	启用自定义日期范围选择
tooltip	Object	工具提示配置
crosshair	Object	十字准线配置
legendSettings	Object	图例配置
stockEvents	Array	股票事件标记
indicators	Array	技术指标
height	string	图表高度
width	string	图表宽度
margin	Object	图表边距配置
chartArea	Object	图表区域样式
background	string	图表背景色
border	Object	图表边框配置
theme	string	图表主题
zoomSettings	Object	缩放和平移配置
rows	Array	多行布局的行定义
selectedDataIndexes	Array	以编程方式选择特定数据点
selectionMode	string	选择模式（None、Point、Series、Cluster、DragXY、DragX、DragY）
isMultiSelect	boolean	允许选择多个数据点
exportType	Array	导出格式（PNG、JPEG、SVG、PDF）
enablePersistence	boolean	在页面重新加载后保留图表状态
enableRtl	boolean	启用从右到左的渲染
locale	string	覆盖全局区域设置/本地化配置
noDataTemplate	string/Function	无可用数据时显示的模板
isTransposed	boolean	以转置方式渲染图表
seriesType	Array	可用的序列类型
indicatorType	Array	可用的技术指标类型
trendlineType	Array	可用的趋势线类型
bearFillColor	string	下跌（熊市）蜡烛的填充颜色
bullFillColor	string	上涨（牛市）蜡烛的填充颜色
animation	Object	序列渲染动画设置
pointClick	Function	点击数据点时触发的事件
stockChartMouseMove	Function	鼠标在图表上移动时触发的事件
stockChartMouseClick	Function	点击图表区域时触发的事件
stockChartMouseDown	Function	鼠标按下时触发的事件
stockChartMouseUp	Function	鼠标松开时触发的事件
stockChartMouseLeave	Function	光标离开图表时触发的事件
tooltipRender	Function	显示前自定义工具提示的事件
axisLabelRender	Function	渲染前自定义坐标轴标签的事件
seriesRender	Function	序列渲染时触发的事件
legendClick	Function	点击图例项时触发的事件
legendRender	Function	渲染图例项时触发的事件
crosshairLabelRender	Function	渲染十字准线工具提示前触发的事件
selectorRender	Function	范围选择器渲染时触发
onZooming	Function	缩放交互期间触发的事件
load	Function	图表加载前触发的生命周期事件
loaded	Function	图表加载后触发的生命周期事件
beforeExport	Function	导出操作前触发的事件
stockEventRender	Function	自定义股票事件标记的渲染
rows	Array	多行布局的行定义
isTransposed	boolean	以转置方式渲染图表
trendlines	Array	趋势线配置（StockChartTrendlinesDirective）

StockChartSeriesDirective

Prop	Type	Description
dataSource	Array	股票数据数组
type	string	系列类型（Candle、Line、Spline、Hilo、HiloOpenClose）
xName	string	x 轴的数据字段（日期）
high	string	最高值的数据字段
low	string	最低值的数据字段
open	string	开盘值的数据字段
close	string	收盘值的数据字段
volume	string	成交量的数据字段
name	string	图例中的系列名称
yName	string	y 轴值的数据字段
yAxisName	string	要绑定此系列的 Y 轴名称（用于多轴）
bearFillColor	string	下跌趋势蜡烛图／柱形图的填充颜色
bullFillColor	string	上涨趋势蜡烛图／柱形图的填充颜色
fill	string	系列颜色或渐变填充（例如，'url(#gradient1)'）
width	number	系列的线宽
opacity	number	系列的不透明度（0-1）
border	Object	系列的边框配置（width、color、dashArray）
marker	Object	数据点标记配置（visible、size、shape、fill、border）
animation	Object	动画设置（enable、duration、delay）
legendShape	string	图例图标形状（Circle、Rectangle、Triangle、Diamond 等）
tooltip	Object	系列专属的工具提示配置
trendlines	Array	此系列的趋势线
cornerRadius	number	矩形形状的圆角半径

常见用例

1. 股票交易平台 - 使用蜡烛图展示实时或历史股票价格
2. 金融分析仪表板 - 采用多图表布局，展示技术指标和事件
3. 投资组合跟踪器 - 可视化投资组合随时间的表现
4. 市场研究工具 - 使用不同系列类型比较多只股票
5. 交易算法回测 - 使用指标和趋势线可视化策略结果
6. 经济数据可视化 - 展示时间序列金融或经济数据
7. 加密货币图表 - 使用 OHLC 数据跟踪加密货币价格走势

模块注入

Stock Chart 需要显式注入模块才能启用功能：

import { Inject, DateTime, DateTimeCategory, Logarithmic, 
         Tooltip, RangeTooltip, Crosshair, 
         LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, 
         HiloSeries, RangeAreaSeries, StockLegend, Trendlines, Export } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, 
         MomentumIndicator, SmaIndicator, AtrIndicator, 
         AccumulationDistributionIndicator, MacdIndicator, 
         StochasticIndicator } from '@syncfusion/ej2-react-charts';

<StockChartComponent>
  <Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, 
                     CandleSeries, StockLegend, Trendlines, Export,
                     EmaIndicator, SmaIndicator, BollingerBands]} />
</StockChartComponent>

常用模块：

坐标轴：

• DateTime - DateTime 坐标轴（股票图表必需）
• DateTimeCategory - 仅适用于工作日的 DateTime 分类坐标轴
• Logarithmic - 对数刻度坐标轴

UI 功能：

• Tooltip - 数据点悬停工具提示
• RangeTooltip - 范围选择器工具提示
• Crosshair - 带坐标轴工具提示的十字线
• StockLegend - 系列图例显示

系列类型：

• LineSeries、SplineSeries - 折线图
• CandleSeries - 传统蜡烛图
• HiloOpenCloseSeries - OHLC 柱形图
• HiloSeries - 高低价柱形图
• RangeAreaSeries - 范围区域可视化

技术分析：

• Trendlines - 趋势线可视化（Linear、Exponential、Logarithmic、Polynomial、Power、Moving Average）
• EmaIndicator、SmaIndicator、TmaIndicator - 移动平均指标
• RsiIndicator、BollingerBands、MacdIndicator - 高级指标
• StochasticIndicator、MomentumIndicator、AtrIndicator - 动量指标
• AccumulationDistributionIndicator - 基于成交量的指标

导出：

• Export - 导出为 PNG、JPEG、SVG、PDF

事件处理

Stock Chart 提供全面的事件支持，可跟踪用户交互并构建自定义行为：

数据点事件

// Point click event
const handlePointClick = (args) => {
  console.log('Point clicked:', args.pointIndex, args.seriesIndex);
  console.log('X:', args.x, 'Y:', args.y);
};

// Point move event (hover)
const handlePointMove = (args) => {
  console.log('Hovering over point:', args.x);
};

<StockChartComponent
  pointClick={handlePointClick}
  pointMove={handlePointMove}
>
  {/* ... */}
</StockChartComponent>

鼠标事件

// Various mouse tracking events
const handleMouseMove = (args) => {
  console.log('Mouse position:', args.x, args.y);
};

const handleMouseLeave = (args) => {
  console.log('Mouse left chart area');
};

const handleMouseClick = (args) => {
  console.log('Chart clicked');
};

<StockChartComponent
  stockChartMouseMove={handleMouseMove}
  stockChartMouseLeave={handleMouseLeave}
  stockChartMouseClick={handleMouseClick}
  stockChartMouseDown={(args) => console.log('Mouse down')}
  stockChartMouseUp={(args) => console.log('Mouse up')}
>
  {/* ... */}
</StockChartComponent>

范围和选择器事件

// Range change event (period selector or range selector)
const handleRangeChange = (args) => {
  console.log('Range changed:', args.start, 'to', args.end);
  // Refresh data or update analysis
};

<StockChartComponent
  rangeChange={handleRangeChange}
>
  {/* ... */}
</StockChartComponent>

图例事件

// Legend click event
const handleLegendClick = (args) => {
  console.log('Legend item clicked:', args.legendText);
};

// Legend render event (for customization)
const handleLegendRender = (args) => {
  if (args.legendText === 'AAPL') {
    args.fill = '#ff0000'; // Customize legend color
  }
};

<StockChartComponent
  legendClick={handleLegendClick}
  legendRender={handleLegendRender}
>
  {/* ... */}
</StockChartComponent>

工具提示事件

// Customize tooltip before rendering
const handleTooltipRender = (args) => {
  args.text = `<b>Stock Price: ${args.text}</b>`;
};

<StockChartComponent
  tooltip={{ enable: true }}
  tooltipRender={handleTooltipRender}
>
  {/* ... */}
</StockChartComponent>

股票事件渲染

// Customize stock event markers
const handleStockEventRender = (args) => {
  // Customize event styling, position, etc.
  if (args.text === 'Earnings') {
    args.background = '#ff0000'; // Custom color for earnings
  }
};

<StockChartComponent
  stockEvents={stockEvents}
  stockEventRender={handleStockEventRender}
>
  {/* ... */}
</StockChartComponent>

生命周期事件

// Load event (before rendering)
const handleLoad = (args) => {
  console.log('Chart loading');
};

// Loaded event (after rendering)
const handleLoaded = (args) => {
  console.log('Chart loaded');
};

<StockChartComponent
  load={handleLoad}
  loaded={handleLoaded}
>
  {/* ... */}
</StockChartComponent>

API 参考

下面是根据官方 Syncfusion StockChart API 整理的简明 API 参考。可根据需要在 references/* 中添加或扩展这些条目。

完整 API 文档：

• 完整 API 参考： references/complete-api-reference.md - 主参考文档，涵盖所有 props、方法、事件、指令和模块
• 精简 API 概览： references/api.md - 常用 API 的快速参考
• Syncfusion 官方文档： https://ej2.syncfusion.com/react/documentation/api/stock-chart/index-default

精选 Props（StockChartComponent）

所有 props 的官方 API 链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel

数据与系列：

• dataSource（Array | DataManager）— 系列的源数据（对象包含 x, open, high, low, close, volume）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#datasource
• series / StockChartSeriesCollectionDirective — 系列定义和类型（Candle、Line、Spline、Hilo、HiloOpenClose）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model

坐标轴：

• primaryXAxis（Object）— X 轴配置（通常为 valueType: 'DateTime' | 'DateTimeCategory' | 'Numeric'）。支持 crosshairTooltip、majorGridLines、majorTickLines。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
• primaryYAxis（Object）— Y 轴配置（通常为 valueType: 'Double' 或 'Logarithmic'）。支持 labelFormat、rangePadding、minorGridLines、crosshairTooltip。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAxis-model
• axes（Array）— 用于多系列缩放的附加 Y 轴（使用 StockChartAxesDirective 和 StockChartAxisDirective）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axes

导航与选择器：

• periods（Array）— 周期选择器按钮（对象包含 intervalType、interval、text）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#periods
• enablePeriodSelector（boolean）— 切换周期选择器的显示状态（默认值：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableperiodselector
• enableSelector（boolean）— 切换范围选择器（滑块）的显示状态（默认值：true）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enableselector
• enableCustomRange（boolean）— 启用自定义范围选择模式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablecustomrange

分析与事件：

• indicators（Array）— 技术指标配置（SMA、EMA、RSI、MACD、Bollinger 等）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
• stockEvents（Array）— 股票事件标记（日期、文本、描述、类型、背景）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockEventModel

交互与 UI：

• tooltip（Object）— 工具提示设置（enable、format、shared）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTooltipSettingsModel
• crosshair（Object）— 十字线设置（enable、lineType）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/crosshairSettingsModel
• legendSettings（Object）— 图例显示和模板。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartLegendSettingsModel 选择与外观：
• selectedDataIndexes (Array) — 以编程方式设置选中的数据点。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selecteddataindexes
• selectionMode (string) — 选择模式（None、Point、Series）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectionmode
• isMultiSelect (boolean) — 允许选择多个数据点。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#ismultiselect

主题与布局：

• theme (string) — 图表主题（Material、Bootstrap、Fabric、Tailwind、HighContrast 等）。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#theme
• background (string) — 图表背景颜色。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#background
• border (Object) — 图表边框配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartBorderModel
• chartArea (Object) — 图表区域样式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartAreaModel
• margin (Object) — 图表边距配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockMarginModel
• title (string) — 图表标题。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#title
• titleStyle (Object) — 标题字体样式。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartFontModel
• width, height (string) — 尺寸。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#width

导出与持久化：

• exportType (Array) — 工具栏中可用的导出格式 ['PNG', 'JPEG', 'SVG', 'PDF']。设置为空数组 [] 可禁用导出。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#exporttype
• enablePersistence (boolean) — 在页面加载之间保留图表状态。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablepersistence

序列与分析：

• series / StockChartSeriesCollectionDirective — 序列集合，包含 StockChartSeriesDirective 项。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockSeries-model
• indicators / StockChartIndicatorsDirective — 技术指标集合，包含 StockChartIndicatorDirective 项。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartIndicatorModel
• trendlines / StockChartTrendlinesDirective — 趋势线集合，包含 StockChartTrendlineDirective 项。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartTrendlineModel

无障碍与 RTL：

• enableRtl (boolean) — 启用从右到左的渲染。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#enablertl

缩放与平移：

• zoomSettings (Object) — 缩放和平移配置。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/zoomSettingsModel

方法

所有方法及其官方 API 链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#methods

• export(type: string, fileName: string) — 将图表导出为 PNG、JPEG、SVG 或 PDF。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#export
• print() — 将图表打印到打印机或导出为 PDF。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#print
• destroy() — 清理并移除图表实例。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#destroy
• getModuleName() — 返回组件模块名称。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#getmodulename
• renderPeriodSelector() — 以编程方式渲染周期选择器。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#renderperiodselector
• rangeChanged(start: Date | number, end: Date | number) — 以编程方式更改可见范围。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechanged

事件

所有事件及其官方 API 链接：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#events

生命周期事件：

• load — 图表加载前触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#load
• loaded — 图表加载后触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#loaded

数据与渲染事件：

• axisLabelRender — 在渲染前自定义每个坐标轴标签。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#axislabelrender
• seriesRender — 序列渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#seriesrender
• beforeExport — 导出操作前触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#beforeexport

用户交互事件：

• pointClick — 单击数据点时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointclick
• pointMove — 鼠标移到数据点上方时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#pointmove
• legendClick — 单击图例项时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendclick
• legendRender — 图例项渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#legendrender

工具提示与十字线事件：

• tooltipRender — 显示前修改工具提示内容。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#tooltiprender

范围与选择器事件：

• rangeChange / onRangeChange — 所选范围更改时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#rangechange
• selectorRender — 范围选择器渲染时触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#selectorrender

技术分析事件：

• stockEventRender — 自定义股票事件标记的渲染。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#stockeventrender
• onZooming — 缩放交互期间触发。API：https://ej2.syncfusion.com/react/documentation/api/stock-chart/stockChartModel#onzooming

建议的参考文件和章节

• references/api.md — 完整的 API 概览（属性、方法、事件），并附有官方文档链接。
• references/configuration.md — 将针对属性的文档移入此处或进行扩展（坐标轴、主题、尺寸）。
• references/interactive-features.md — 添加事件钩子和 tooltipRender、pointClick、axisLabelRender 示例。
• references/technical-analysis.md — 扩展 indicators 和 stockEvents API 示例。

最简 API 示例（属性 + 事件）

<StockChartComponent
  id="stockchart"
  dataSource={data}
  primaryXAxis={{ valueType: 'DateTime' }}
  enablePeriodSelector={true}
  indicators={[{ type: 'Sma', period: 14 }]}
  stockEvents={[{ date: new Date(2023,0,1), text: 'Earnings' }]}
  tooltip={{ enable: true }}
  crosshair={{ enable: true }}
  load={(args) => console.log('loading', args)}
  loaded={(args) => console.log('loaded', args)}
  axisLabelRender={(args) => {/* modify labels */}}
  pointClick={(args) => {/* handle point click */}}
>
  <Inject services={[DateTime, CandleSeries, Tooltip, Crosshair]} />
  <StockChartSeriesCollectionDirective>
    <StockChartSeriesDirective type="Candle" xName="x" open="open" high="high" low="low" close="close" />
  </StockChartSeriesCollectionDirective>
</StockChartComponent>