用途
本技能面向在 React 项目中实现 Syncfusion Stock Chart 组件，用于对金融与市场数据进行可视化。资料给出的典型使用场景包括：可视化金融或股票数据（股票价格、交易量、市场走势）、展示 OHLC 数据（以 K 线或 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；
- 内置周期选择器，用于快捷日期范围导航；
- 带滑块控件（thumb）的范围导航器，用于精确范围选择；
- 技术指标（20 种以上）及 indicatorType 支持；
- 股票事件标注（stockEvents）与 stockEventRender；
- 交互式提示框、十字准线（trackball）与图例；
- 选择与交互：selectionMode、isMultiSelect、selectedDataIndexes；
- 缩放与平移（zoomSettings、onZooming）；
- 导出图片或 PDF 及打印（exportType、Export、Print）；
- 持久化与 RTL 支持（enablePersistence、enableRtl）；
- 响应式与无障碍（WCAG、ARIA、键盘导航）。
文档还按主题划分了参考章节：入门（getting-started.md）、轴与配置（configuration.md）、系列类型与可视化（series-types.md）、周期与范围选择器（selectors.md）、交互特性与事件（interactive-features.md）、技术分析（technical-analysis.md）、实用工具（utilities.md）。
使用方式
入门需安装 @syncfusion/ej2-react-charts 包，可用 Vite 或 create-react-app 建立项目，采用 Inject 服务注入模式。数据字段结构为 x、open、high、low、close、volume。基础用法示例中，引入 StockChartComponent、StockChartSeriesCollectionDirective、StockChartSeriesDirective 及 Inject、DateTime、Tooltip、RangeTooltip、Crosshair 和各系列服务，通过 primaryXAxis 设置 valueType: 'DateTime'，在 StockChartSeriesCollectionDirective 内以 StockChartSeriesDirective 指定 dataSource、type='Candle' 以及 xName、high、low、open、close、volume 字段。周期选择器通过 periods 数组（每项含 intervalType、interval、text）配合 enablePeriodSelector={true} 配置。
样式方面，资料强调需在 index.html 的 head 中引入所需 CSS 样式表，周期选择器界面才能正常显示。示例引用 Syncfusion Tailwind CSS（https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css）以及 Bootstrap CSS（https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css）。资料提示：Syncfusion CSS 版本需与 @syncfusion/ej2-react-charts 包版本一致；若使用 Material、Bootstrap、Fabric、HighContrast 等其他主题，需使用对应的 CSS 文件；这些样式表应放在自定义样式表之前；缺少这些样式表时，周期选择器按钮、提示框等界面元素可能无法正确渲染。资料同时列出各主题的替代 CSS 地址：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 轴（默认，适用于带日期的股票价格数据，需注入 DateTime 模块）、DateTimeCategory 轴（仅显示交易日，排除周末与节假日，需注入 DateTimeCategory 模块）、对数轴（Logarithmic，适用于跨越多个数量级的数据，不能包含零或负值，需注入 Logarithmic 模块）、数值轴（默认线性数值刻度，无需注入模块，可设置 minimum、maximum、interval，labelFormat 如 '${value}'）。多轴配置可通过 StockChartAxesDirective 与 StockChartAxisDirective 定义附加轴（如 name='volumeAxis'、opposedPosition、title、labelFormat），系列通过 yAxisName 绑定到各自轴。
适用场景与限制
资料列出的适用场景集中在金融与时间序列可视化，包括金融仪表盘、技术分析叠加、股票事件标注、交易日数据展示等。限制方面，资料明确指出：缺少必需 CSS 样式表时部分界面元素可能无法正确渲染；Syncfusion CSS 版本需与图表包版本一致；对数轴不能包含零或负值；部分轴类型与系列类型需要导入并注入对应模块。关于收费、价格、授权或具体平台支持等信息，资料暂未提供。