npm 包 React-StockCharts 使用教程

React-StockCharts 是一个用于构建交互式股票图的 JavaScript 库。由于 React-StockCharts 基于 React 库，因此它可以方便地与 React 项目集成。

在本篇文章中，我们将介绍如何使用 npm 包 React-StockCharts 来构建一个简单的股票图表应用。我们将涵盖以下内容：

  1. 安装与配置 React-StockCharts
  2. 构建一个简单的股票图表应用
  3. 添加指标与交互

安装与配置 React-StockCharts

首先需要在项目中安装 React-StockCharts。命令如下：

- --- ------- ------ -----------------

在项目中安装完成后，我们需要引入相关的库文件以便在项目中使用。在应用的主文件（例如 app.js）中添加以下代码：

------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ ----- - ---- --------------------
------ - ---------- - ---- -------------------------------
------ - ------ ----- - ---- -----------------------------
------ - ----------------- - ---- ------------------------------
------ - ---------------- ----------------- ---------------- - ---- ------------------------------------
------ - ------------------------------ - ---- ------------------------------
------ - -------- - ---- -------------------------------

构建一个简单的股票图表应用

现在，我们已经将 React-StockCharts 安装和引入到项目中，接下来我们开始构建我们的图表应用。

首先，在我们的 app.js 文件中导入一个 JSON 数据文件。这里的数据来自 Yahoo! 财经，它包含苹果公司的股票价格数据。

----- ---- - -----------------------

然后，我们需要创建一个 React 组件来展示图表。我们使用 react-stockcharts 的 ChartCanvas 和 Chart 组件来渲染图表。

----- ---------- ------- --------------- -
  -------- -

    ------ -
        ------------ 
          -----------
          ------------
          --------- ----- --- ------ --- ---- --- ------- -- --
          -----------
          -----------------
          -----------------------------------------------
          ------------ -- -------
          -------------- ---------- -- --- --- ---------- --- -----
          -
          ------ ------ ----------- -- -------- ------- -
            ------ --------------- --------------- --
            ------ -------------- -------------- --------- --
            ----------- ------------ -- -------- --
            -----------------
              -----------
              ---------------
              --------------------------------------
            --
            -----------------
              ----------
              --------------
              -----------------------------
            --
          --------
          ---------------- --
        --------------
    --
  -
-

---------- - ---------------------

在这个组件中，我们设置了图表的宽度、高度、数据、比例尺、x 轴与 y 轴、线条以及鼠标交互等部分。

最后，我们需要将 StockChart 组件渲染到 DOM 中。

----- --- ------- --------------- -
  -------- -
    ------ -
      -----
        ---------------
        ----------- --
      ------
    --
  -
-

----------------
  ---- ---
  -------------------------------
--

至此，我们已经成功地创建了一个简单的股票图表应用。在浏览器中打开应用，可以看到以下效果：

添加指标与交互

现在，我们已经成功地展示出了股票价格的历史走势，接下来，我们尝试在图表中加入交互及指标。

添加 MACD 指标：

------ - ---- - ---- ----------------------------------
------ - -------------- - ---- ----------------------------------------------------

-- ------
----- -------------- - ------
  ----------
    ----- ---
    ----- ---
    ------- --
  --
  ---------- -- -- ------- - ----
  ----------- -- --------

----- ---------- ------- --------------- -
  -------- -
    ----- -------------- - ---------------------

    ------ -
        -------------
          --- ---- ---
          ------ ------ ------------
              ------------------------------------
              ----------- -- -- --- - - -----
            -
              ------ ------------- ------------- --------- ----------------------------

              -----------------
                ---------
                -------------
                -----------------------------
              --

              --------------
                -------------------------------------
                -------------------
              --
            --------
        --------------
    --
  -
-

添加交互：

------ - ---- - ---- ------------------------------

----- ---------- ------- --------------- -
  ------------------ -
    -------------
    --------------- - ---------------------------
  -

  -- ------
  ------------- -
    ----- ------- - ----------

    --------------- -
      -- ------------- --
      ---- --- -
        ----- - ----------- - - --------------------------------
        -------------------------------------------------------- ------------------------------------------------
        ------------------------------------
        ------
      -
      -- --------------- --
      ---- ----
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- ------ - --------------------------
        ----- ------ - ----------------
        ----- -- - --------- - ----------
        ----- ------- - -- - ----
        ----- -------- - ---------- - -------- --------- - ---------
        ------------------------------------
        ------------------------------------
        ------
      -
      -- -------------- --
      ---- ----
      ---- ---- -
        ----- - ----------- - - --------------------------------
        ----- ------ - --------------------------
        ----- ------ - ----------------
        ----- -- - --------- - ----------
        ----- ------- - -- - -----
        ----- -------- - ---------- - -------- --------- - ---------
        ------------------------------------
        ------------------------------------
        ------
      -
      -- ---------- --
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- - ------ - - ------------
        ----- -- - ----------------- - -----------------
        ----- ---- - ----------------------------------
        ----- ------ - ----------------------------
        ----- --------- - ----- - --- --------- - ----
        -------------------------------------
        ------------------------------------
        ------
      -
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- - ------ - - ------------
        ----- -- - ----------------- - -----------------
        ----- ----- - -------------------------------
        ----- ------ - ----------------------------
        ----- --------- - ---------- - --- ----- - ----
        -------------------------------------
        ------------------------------------
        ------
      -
      --------
        ------
    -
  -

  -------- -
    -- ---- --
  -

  ------------------- -
    ------------------------------------ -----------------
  -

  ---------------------- -
    --------------------------------------- -----------------
  -

-

现在，我们已经实现了一个具有缩放、平移及指标的交互式股票图表应用。完整代码如下：

------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ ----- - ---- --------------------
------ - ---------- - ---- -------------------------------
------ - ------ ----- - ---- -----------------------------
------ - ----------------- - ---- ------------------------------
------ - ---------------- ----------------- ---------------- - ---- ------------------------------------
------ - ------------------------------ - ---- ------------------------------
------ - -------- - ---- -------------------------------
------ - ---- - ---- ----------------------------------
------ - -------------- - ---- ----------------------------------------------------

----- ---- - -----------------------

----- -------------- - ------
  ----------
    ----- ---
    ----- ---
    ------- --
  --
  ---------- -- -- ------- - ----
  ----------- -- --------

----- ---------- ------- --------------- -
  ------------------ -
    -------------
    --------------- - ---------------------------
  -

  ------------- -
    ----- ------- - ----------

    --------------- -
      -- ------------- --
      ---- --- -
        ----- - ----------- - - --------------------------------
        -------------------------------------------------------- ------------------------------------------------
        ------------------------------------
        ------
      -
      -- --------------- --
      ---- ----
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- ------ - --------------------------
        ----- ------ - ----------------
        ----- -- - --------- - ----------
        ----- ------- - -- - ----
        ----- -------- - ---------- - -------- --------- - ---------
        ------------------------------------
        ------------------------------------
        ------
      -
      -- -------------- --
      ---- ----
      ---- ---- -
        ----- - ----------- - - --------------------------------
        ----- ------ - --------------------------
        ----- ------ - ----------------
        ----- -- - --------- - ----------
        ----- ------- - -- - -----
        ----- -------- - ---------- - -------- --------- - ---------
        ------------------------------------
        ------------------------------------
        ------
      -
      -- ---------- --
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- - ------ - - ------------
        ----- -- - ----------------- - -----------------
        ----- ---- - ----------------------------------
        ----- ------ - ----------------------------
        ----- --------- - ----- - --- --------- - ----
        -------------------------------------
        ------------------------------------
        ------
      -
      ---- --- -
        ----- - ----------- - - --------------------------------
        ----- - ------ - - ------------
        ----- -- - ----------------- - -----------------
        ----- ----- - -------------------------------
        ----- ------ - ----------------------------
        ----- --------- - ---------- - --- ----- - ----
        -------------------------------------
        ------------------------------------
        ------
      -
      --------
        ------
    -
  -

  -------- -
    ----- -------------- - ---------------------

    ------ -
        ------------ 
          -----------------
          -----------
          ------------
          --------- ----- --- ------ --- ---- --- ------- -- --
          ---------------------
          -----------------
          -----------------------------------------------
          ------------ -- -------
          -------------- ---------- -- --- --- ---------- --- -----
          -
          ------ ------ ----------- -- -------- ------- -
            ------ --------------- --------------- --
            ------ -------------- -------------- --------- --
            ----------- ------------ -- -------- --
            -----------------
              -----------
              ---------------
              --------------------------------------
            --
            -----------------
              ----------
              --------------
              -----------------------------
            --
          --------
          ------ ------ ------------
              ------------------------------------
              ----------- -- -- --- - - -----
            -
              ------ ------------- ------------- --------- ----------------------------

              -----------------
                ---------
                -------------
                -----------------------------
              --

              --------------
                -------------------------------------
                -------------------
              --
            --------
          ---------------- --
        --------------
    --
  -

  ------------------- -
    ------------------------------------ -----------------
  -

  ---------------------- -
    --------------------------------------- -----------------
  -
-

---------- - ---------------------

----- --- ------- --------------- -
  -------- -
    ------ -
      -----
        ---------------
        ----------- --
      ------
    --
  -
-

----------------
  ---- ---
  -------------------------------
--

在这个应用中，我们使用 React-StockCharts 创建了一个交互式的股票图表应用。我们展示了如何添加 MACD 指标以及如何通过键盘操作来控制比例尺。通过这个简单的应用，我们学习了如何使用 React-StockCharts 来创建动态交互式的数据可视化应用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-react-stockcharts

阅读全文

猜你喜欢

  • npm包 wtf-8 使用教程

    wtf-8是一种进行Unicode编码的字符串压缩算法。它采用了UTF-8编码格式，减小了存储和传输数据的体积。本文介绍如何使用npm包wtf-8进行wtf-8编码和解码。

    5 年前
  • NPM 包 webpack-combine-loaders 使用教程

    引言 如果你是一名前端工程师，那么相信你已经非常熟悉 webpack 这个前端项目构建工具了。webpack 提供了高效、灵活的模块加载和打包能力，不仅帮助你解决了无数烦恼，而且还能提升开发效率。

    5 年前
  • npm 包 tslint-config-swimlane 使用教程

    前言 在前端开发中，代码质量的检查和规范十分重要。tslint 是 TypeScript 代码的一种规范，能够在编写代码时帮助我们发现代码中潜在的问题。tslint-config-swimlane 是...

    5 年前
  • npm 包 preserve 使用教程

    在前端开发过程中，我们常常需要运行一些命令来构建、打包、部署前端项目，这些命令涉及到对文件进行操作，如压缩、合并、删除等。在操作文件时，我们需要注意文件的元信息，如文件的创建时间、修改时间、权限等，因...

    5 年前
  • NPM 包 PostCSS-Unique-Selectors 使用教程

    前言 PostCSS 是一个基于 Node.js 的 CSS 处理器，它允许开发者使用 JavaScript 插件来处理 CSS。其中，postcss-unique-selectors 是一个 Pos...

    5 年前
  • npm 包 path-type 使用教程

    在前端开发过程中，经常会遇到需要判断一个路径是文件还是文件夹的情况。这时候就可以使用 npm 包 path-type 来解决问题。path-type 通过提供一个函数，可以方便地判断一个路径的类型，并...

    5 年前
  • npm 包 math-expression-evaluator 使用教程

    前言 在前端开发中，我们常常需要进行数学计算，比如表单计算、图表计算等等。如果手动编写计算代码，需要考虑到运算符优先级、括号匹配等问题，非常繁琐。因此，我们可以利用现有的 npm 包来简化计算过程，其...

    5 年前
  • npm包 lodash.tail使用教程

    什么是lodash.tail lodash.tail是npm上的一个JavaScript工具库，它提供了很多有用的函数，用于简化JavaScript代码的编写和管理。

    5 年前
  • npm 包 lodash._baseassign 使用教程

    在前端开发中，我们经常需要处理对象的合并。lodash 是一个流行的 JavaScript 工具库，它提供了一些非常实用的函数来简化开发，其中就包含了像对象合并这样的功能。

    5 年前
  • npm 包 lodash._basevalues 使用教程

    在前端开发中，我们经常会使用到一些工具库和第三方包，其中 lodash 可以说是最常用的之一了。而 lodash._basevalues 这个模块则提供了一种非常方便的方法，可以帮助我们快速地获取一个...

    5 年前
  • 使用 lodash._baseclone 提高前端开发效率

    在前端开发过程中，难免会遇到复杂的数据处理和操作问题。此时，强大的工具库和函数库就非常有用了。其中，lodash 是一个流行的 JavaScript 工具库，它提供了许多实用的数据操作工具。

    5 年前
  • npm 包 lodash._arraycopy 使用教程

    简介 lodash._arraycopy 是 lodash 库中的一个小模块，它提供了用于复制数组的函数。 在前端开发中，经常会遇到需要对数组进行复制的情况，lodash._arraycopy 可以非...

    5 年前
  • npm 包 lodash._basecopy 使用教程

    前言 在前端开发中，我们经常会遇到需要深拷贝对象或数组的场景。为了解决这个问题，很多工具库推出了相关的方法和函数，其中 lodash._basecopy 就是一个非常常见的 npm 包。

    5 年前
  • npm 包 json-schema-traverse 使用教程

    前言 json-schema-traverse 是 npm 上一款用于遍历 JSON Schema 对象的工具包。它可以遍历对象并对其进行深度优先搜索，同时提供了各种访问对象的方法。

    5 年前
  • npm 包 is-posix-bracket 使用教程

    在前端开发中，我们经常用到正则表达式匹配文本。而有些正则表达式中包含 POSIX 字符集的问题，这时我们就需要使用到 npm 包 is-posix-bracket 来解决这个问题了。

    5 年前
  • npm 包 filename-regex 使用教程

    1. 简介 filename-regex 是一个轻量级的 npm 包，它提供了一种简便的方式来检测文件名是否合法。在前端开发中，通常需要对文件名进行校验，避免因为文件名不规范而导致的问题。

    5 年前
  • npm 包 expand-range 使用教程

    前言 在前端开发中，我们经常需要处理一些数据，例如时间、数字等等。而这些数据通常会用到一个区间范围。如何简单地处理这些区间范围成为了我们需要解决的一个问题。今天，我要介绍一个非常常用的 npm 包 -...

    5 年前
  • npm 包 delayed-stream 使用教程

    在前端开发中，我们通常会处理一些需要时间才能完成的操作，例如上传和下载大型文件、处理大量数据等。对于这种情况，我们可以使用 npm 包 delayed-stream 来实现异步流处理，以提高应用的性能...

    5 年前
  • npm 包 colormin 使用教程

    在前端开发中，经常需要对颜色进行处理，colormin 是 npm 上一款可以压缩或提取颜色的包，可以很好的帮助我们对网页中的颜色进行管理和优化。 安装和使用 你可以使用以下命令在你的项目中安装 co...

    5 年前
  • npm 包 @compodoc/compodoc 使用教程

    前言 在现代化的前端开发中，为代码生成自动化文档非常重要。Compodoc 是一个基于 TypeScript 的 Angular 项目自动生成文档的工具。它支持各种形式的文档生成，包括 HTML、Ma...

    5 年前

相关推荐

    暂无文章