简介
React-trading-ui 是一款基于 React 的交易 UI 组件库，因其设计简洁、易用性强而备受欢迎。本文将详细介绍 npm 包 react-trading-ui 的使用方法，帮助读者快速上手。
安装及使用
安装
npm 包 react-trading-ui 已经发布到 npm 官方库中，您可以直接使用 npm 安装。首先，需确保安装了 React：
npm install react
接着，安装 react-trading-ui：
npm install react-trading-ui --save
引入
在项目中引入 react-trading-ui：
import { TradingChart } from 'react-trading-ui';引入之后即可在 JSX 中使用 TradingChart 组件。
组件
TradingChart
TradingChart 是 react-trading-ui 中最重要的组件之一。它是一款交互式的、支持多种渲染类型（candle，line）的股票图表，也是使用最为广泛的组件之一。
TradingChart 的 props 有以下几个：
- width: 图表宽度，必填。
- height: 图表高度，必填。
- data: 渲染数据，必填。
- type: 渲染类型，可选 'candle' 或 'line'。
- interval: 单根 K 线时间间隔，仅在 type='candle' 时有效。
- yAxisPad: Y 轴留白大小，单位为像素。
- onCrosshairMove: 鼠标移动至图表时的事件回调。
以下是一个 TradingChart 示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -------------------
----- ---- - -
-
---------- --- ---------------------------------------
----- ----
----- ----
---- ---
------ ---
------- -------
--
-
---------- --- ---------------------------------------
----- ---
----- ---
---- ---
------ ---
------- -------
--
-- ---
--
----- ------- - -- -- -
------ -
-------------
-----------
------------
-----------
-------------
------------ - -- - -- - -----
-------------
-------------------- -- -- -
-------------- ---
--
--
--
--总结
npm 包 react-trading-ui 是一款易用性强、功能丰富的交易 UI 组件库，适用于股票相关的前端开发。本文介绍了 react-trading-ui 的安装、引入方法以及 TradingChart 组件的使用方法，帮助读者快速上手使用 react-trading-ui。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a0981e8991b448d7b01