React-StockCharts 是一个用于构建交互式股票图的 JavaScript 库。由于 React-StockCharts 基于 React 库，因此它可以方便地与 React 项目集成。
在本篇文章中，我们将介绍如何使用 npm 包 React-StockCharts 来构建一个简单的股票图表应用。我们将涵盖以下内容：
- 安装与配置 React-StockCharts
- 构建一个简单的股票图表应用
- 添加指标与交互
安装与配置 React-StockCharts
首先需要在项目中安装 React-StockCharts。命令如下：
$ npm install --save react-stockcharts
在项目中安装完成后，我们需要引入相关的库文件以便在项目中使用。在应用的主文件（例如 app.js）中添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------------ ----- - ---- -------------------- ------ - ---------- - ---- ------------------------------- ------ - ------ ----- - ---- ----------------------------- ------ - ----------------- - ---- ------------------------------ ------ - ---------------- ----------------- ---------------- - ---- ------------------------------------ ------ - ------------------------------ - ---- ------------------------------ ------ - -------- - ---- -------------------------------展开代码
构建一个简单的股票图表应用
现在，我们已经将 React-StockCharts 安装和引入到项目中，接下来我们开始构建我们的图表应用。
首先，在我们的 app.js 文件中导入一个 JSON 数据文件。这里的数据来自 Yahoo! 财经，它包含苹果公司的股票价格数据。
const data = require('./data.json');
然后，我们需要创建一个 React 组件来展示图表。我们使用 react-stockcharts 的 ChartCanvas 和 Chart 组件来渲染图表。
-- -------------------- ---- ------- ----- ---------- ------- --------------- - -------- - ------ - ------------ ----------- ------------ --------- ----- --- ------ --- ---- --- ------- -- -- ----------- ----------------- ----------------------------------------------- ------------ -- ------- -------------- ---------- -- --- --- ---------- --- ----- - ------ ------ ----------- -- -------- ------- - ------ --------------- --------------- -- ------ -------------- -------------- --------- -- ----------- ------------ -- -------- -- ----------------- ----------- --------------- -------------------------------------- -- ----------------- ---------- -------------- ----------------------------- -- -------- ---------------- -- -------------- -- - - ---------- - ---------------------展开代码
在这个组件中，我们设置了图表的宽度、高度、数据、比例尺、x 轴与 y 轴、线条以及鼠标交互等部分。
最后，我们需要将 StockChart 组件渲染到 DOM 中。
-- -------------------- ---- ------- ----- --- ------- --------------- - -------- - ------ - ----- --------------- ----------- -- ------ -- - - ---------------- ---- --- ------------------------------- --展开代码
至此，我们已经成功地创建了一个简单的股票图表应用。在浏览器中打开应用，可以看到以下效果：
添加指标与交互
现在，我们已经成功地展示出了股票价格的历史走势，接下来，我们尝试在图表中加入交互及指标。
添加 MACD 指标：
-- -------------------- ---- ------- ------ - ---- - ---- ---------------------------------- ------ - -------------- - ---- ---------------------------------------------------- -- ------ ----- -------------- - ------ ---------- ----- --- ----- --- ------- -- -- ---------- -- -- ------- - ---- ----------- -- -------- ----- ---------- ------- --------------- - -------- - ----- -------------- - --------------------- ------ - ------------- --- ---- --- ------ ------ ------------ ------------------------------------ ----------- -- -- --- - - ----- - ------ ------------- ------------- --------- ---------------------------- ----------------- --------- ------------- ----------------------------- -- -------------- ------------------------------------- ------------------- -- -------- -------------- -- - -展开代码
添加交互：
-- -------------------- ---- ------- ------ - ---- - ---- ------------------------------ ----- ---------- ------- --------------- - ------------------ - ------------- --------------- - --------------------------- - -- ------ ------------- - ----- ------- - ---------- --------------- - -- ------------- -- ---- --- - ----- - ----------- - - -------------------------------- -------------------------------------------------------- ------------------------------------------------ ------------------------------------ ------ - -- --------------- -- ---- ---- ---- --- - ----- - ----------- - - -------------------------------- ----- ------ - -------------------------- ----- ------ - ---------------- ----- -- - --------- - ---------- ----- ------- - -- - ---- ----- -------- - ---------- - -------- --------- - --------- ------------------------------------ ------------------------------------ ------ - -- -------------- -- ---- ---- ---- ---- - ----- - ----------- - - -------------------------------- ----- ------ - -------------------------- ----- ------ - ---------------- ----- -- - --------- - ---------- ----- ------- - -- - ----- ----- -------- - ---------- - -------- --------- - --------- ------------------------------------ ------------------------------------ ------ - -- ---------- -- ---- --- - ----- - ----------- - - -------------------------------- ----- - ------ - - ------------ ----- -- - ----------------- - ----------------- ----- ---- - ---------------------------------- ----- ------ - ---------------------------- ----- --------- - ----- - --- --------- - ---- ------------------------------------- ------------------------------------ ------ - ---- --- - ----- - ----------- - - -------------------------------- ----- - ------ - - ------------ ----- -- - ----------------- - ----------------- ----- ----- - ------------------------------- ----- ------ - ---------------------------- ----- --------- - ---------- - --- ----- - ---- ------------------------------------- ------------------------------------ ------ - -------- ------ - - -------- - -- ---- -- - ------------------- - ------------------------------------ ----------------- - ---------------------- - --------------------------------------- ----------------- - -展开代码
现在，我们已经实现了一个具有缩放、平移及指标的交互式股票图表应用。完整代码如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------------ ----- - ---- -------------------- ------ - ---------- - ---- ------------------------------- ------ - ------ ----- - ---- ----------------------------- ------ - ----------------- - ---- ------------------------------ ------ - ---------------- ----------------- ---------------- - ---- ------------------------------------ ------ - ------------------------------ - ---- ------------------------------ ------ - -------- - ---- ------------------------------- ------ - ---- - ---- ---------------------------------- ------ - -------------- - ---- ---------------------------------------------------- ----- ---- - ----------------------- ----- -------------- - ------ ---------- ----- --- ----- --- ------- -- -- ---------- -- -- ------- - ---- ----------- -- -------- ----- ---------- ------- --------------- - ------------------ - ------------- --------------- - --------------------------- - ------------- - ----- ------- - ---------- --------------- - -- ------------- -- ---- --- - ----- - ----------- - - -------------------------------- -------------------------------------------------------- ------------------------------------------------ ------------------------------------ ------ - -- --------------- -- ---- ---- ---- --- - ----- - ----------- - - -------------------------------- ----- ------ - -------------------------- ----- ------ - ---------------- ----- -- - --------- - ---------- ----- ------- - -- - ---- ----- -------- - ---------- - -------- --------- - --------- ------------------------------------ ------------------------------------ ------ - -- -------------- -- ---- ---- ---- ---- - ----- - ----------- - - -------------------------------- ----- ------ - -------------------------- ----- ------ - ---------------- ----- -- - --------- - ---------- ----- ------- - -- - ----- ----- -------- - ---------- - -------- --------- - --------- ------------------------------------ ------------------------------------ ------ - -- ---------- -- ---- --- - ----- - ----------- - - -------------------------------- ----- - ------ - - ------------ ----- -- - ----------------- - ----------------- ----- ---- - ---------------------------------- ----- ------ - ---------------------------- ----- --------- - ----- - --- --------- - ---- ------------------------------------- ------------------------------------ ------ - ---- --- - ----- - ----------- - - -------------------------------- ----- - ------ - - ------------ ----- -- - ----------------- - ----------------- ----- ----- - ------------------------------- ----- ------ - ---------------------------- ----- --------- - ---------- - --- ----- - ---- ------------------------------------- ------------------------------------ ------ - -------- ------ - - -------- - ----- -------------- - --------------------- ------ - ------------ ----------------- ----------- ------------ --------- ----- --- ------ --- ---- --- ------- -- -- --------------------- ----------------- ----------------------------------------------- ------------ -- ------- -------------- ---------- -- --- --- ---------- --- ----- - ------ ------ ----------- -- -------- ------- - ------ --------------- --------------- -- ------ -------------- -------------- --------- -- ----------- ------------ -- -------- -- ----------------- ----------- --------------- -------------------------------------- -- ----------------- ---------- -------------- ----------------------------- -- -------- ------ ------ ------------ ------------------------------------ ----------- -- -- --- - - ----- - ------ ------------- ------------- --------- ---------------------------- ----------------- --------- ------------- ----------------------------- -- -------------- ------------------------------------- ------------------- -- -------- ---------------- -- -------------- -- - ------------------- - ------------------------------------ ----------------- - ---------------------- - --------------------------------------- ----------------- - - ---------- - --------------------- ----- --- ------- --------------- - -------- - ------ - ----- --------------- ----------- -- ------ -- - - ---------------- ---- --- ------------------------------- --展开代码
在这个应用中，我们使用 React-StockCharts 创建了一个交互式的股票图表应用。我们展示了如何添加 MACD 指标以及如何通过键盘操作来控制比例尺。通过这个简单的应用，我们学习了如何使用 React-StockCharts 来创建动态交互式的数据可视化应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-stockcharts
