npm 包 @oskarer/techan 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在前端开发中，使用专业的图表工具来展示数据是非常重要的。@oskarer/techan 是一个非常好用的 JavaScript 技术包，用于创建各种类型的股票和金融图表。本文将详细介绍如何使用 @oskarer/techan 包来展示图表并生成数据。

安装 @oskarer/techan 包

在使用 @oskarer/techan 包之前，需要安装它。可以通过以下命令来安装 @oskarer/techan 包：

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

基本介绍

techan 模块包含以下方法：

  1. plot.*：图表绘制方法。
  2. indicator.*：技术指标算法。
  3. scale.*：变换数据到屏幕空间的方法。
  4. svg.*：SVG元素的创建方法。
  5. accessor.*：用于获取数据点值的方法。

绘制基础图表

首先，创建一个 HTML 文件，引入 d3.js 和 techan.js：

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

在 <body> 标签内添加一个空的 <svg> 元素，用于绘制图表。

然后，在 <script> 标签中，添加以下内容：

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

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

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

这里首先设置了一个数据数组，用于展示图表，然后使用 plot 方法创建一个新的空白图表，并使用 d3.select() 方法将之前添加的 <svg> 元素作为 plot 方法的参数。最后，使用 d3.call() 方法将图表绘制到 <svg> 元素上。

添加 X 和 Y 轴

在绘制图表之前，需要添加 X 和 Y 轴。

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

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

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

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

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

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

相比于上一个代码片段，这里添加了 x 和 y 的比例尺，使用 d3.svg.axis() 方法创建 X 和 Y 轴，并使用 techan.plot.axis() 方法创建 X 和 Y 轴的网格线。最后，设置了图表的大小和 plot 元素。现在，图表就拥有了 X 和 Y 轴。

绘制 K 线图

K 线图是一种用于展示股票价格的图表。在 @oskarer/techan 中，使用 techan.plot.candlestick 方法来绘制 K 线图。

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

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

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

使用 techan.plot.candlestick() 方法创建一个新的烛台绘制器，并将其作为 plot 元素的子元素添加到 plot 中。然后，使用 svg.call() 方法将 plot 元素绘制到 <svg> 元素中。

添加 MA 指标

MA 指标展示了股票价格的一些趋势。在 @oskarer/techan 中，使用 techan.plot.sma 方法来绘制 MA 指标。

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

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

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

使用 techan.plot.sma() 方法创建一个新的 SMA 绘制器，并将其作为 plot 元素的子元素添加到 plot 中。然后，使用 svg.call() 方法将 plot 元素绘制到 <svg> 元素中。

完整代码

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

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

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

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

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

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

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

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

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

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

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

结论

本文详细介绍了如何使用 @oskarer/techan 包来绘制股票和金融图表。我们首先安装了 @oskarer/techan 包，并创建了基础的图表，然后添加了 X 和 Y 轴，绘制了 K 线图和 MA 指标。关于 @oskarer/techan 包的更多详细内容，可以在官方文档中了解到。

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

阅读全文

猜你喜欢

  • npm包meteor-bigchain-collection使用教程

    概述 Meteor Bigchain Collection是一个npm包，用于将Meteor Web应用程序与BigchainDB集成。该包提供了一个Collection对象，该对象使用Bigchai...

    3 年前
  • npm 包 guard-panel 使用教程

    简介 guard-panel 是一个基于 Vue.js 的开源 UI 组件库，主要用于前端界面的开发，具有丰富的 UI 组件和实用的功能。其中包含了大量常用的组件，如按钮、输入框、表格、消息框等，还有...

    3 年前
  • npm 包 o2-auth-fs 使用教程

    在前端开发过程中，用户认证和文件存储是常见需求，而 npm 包 o2-auth-fs 可以实现这两个功能的整合，帮助开发者快速构建用户认证和文件存储功能。本文将介绍如何使用 o2-auth-fs np...

    3 年前
  • npm 包 @bradleymeck/thenables 使用教程

    介绍 在 Javascript 中，Promise 是一个很常用的对象，它代表了一个异步操作的最终结果。但是，除了 Promise 以外，还有一种类 Promise 的对象，那就是 Thenable。

    3 年前
  • npm 包 node-elizabeth 使用教程

    如果你是一个前端开发者，那么你一定会常常需要生成一些随机数据来模拟测试数据或构建演示页面，这时候你可能会使用一些在线的工具或自己写一些简单的代码来生成随机数据。但是有没有一种更加高效的方式来生成随机数...

    3 年前
  • npm 包 medix 使用教程

    介绍 medix 是一个可以帮助前端开发者实现应用程序状态管理的 JavaScript 库，该库在使用 Flux 架构和 Redux 库的基础上进行了深度优化，使得代码变得更加简洁易懂，同时在功能方面...

    3 年前
  • npm 包 draft-js-toolbar-link-plugin 使用教程

    draft-js-toolbar-link-plugin 是一个基于 Draft.js 编辑器的插件，可以为编辑器添加链接插入功能，方便用户快速插入链接。 安装 可以通过 npm 来安装 draft-...

    3 年前
  • npm 包 hubot-grafana-zoto 使用教程

    介绍 hubot-grafana-zoto 是一个基于 hubot 平台的 npm 包，它提供了一个 hubot 脚本，可以方便地从 zoto 显示 Grafana 的数据。

    3 年前
  • npm 包 react-line-social 使用教程

    前言 React 是现今使用最广泛的前端框架之一，而 npm 是 Node.js 的包管理器，可以让我们方便地安装和管理第三方包。本文将介绍一个 npm 包 react-line-social，它能在...

    3 年前
  • npm包react-native-password-input使用教程

    介绍 react-native-password-input是一个常用于React Native开发的npm包，用于提供密码输入框的UI组件。它的功能非常强大，可以实现多种密码输入方式，如单个字符输入...

    3 年前
  • NPM 包 oaex-liqui 使用教程

    在前端领域中，使用 npm 包已经成为了日常工作的一部分。本文将会介绍一款 npm 包 oaex-liqui 的使用方法，以及它对前端工作的指导和深刻学习价值。 oaex-liqui 概述 oaex-...

    3 年前
  • npm 包 pr0mised-m0ng0 使用教程

    简介 pr0mised-m0ng0 是一款基于 MongoDB 的 npm 包，它提供了一个更加高级的 API，使得开发人员可以更加便捷地使用 MongoDB。这个包可以在 Node.js 的环境下进...

    3 年前
  • npm 包 signalw 使用教程

    前言 Signalw 是一个实时通讯平台，可用于 Web 端和移动端。它提供了一组 API，使你可以方便地实现即时通讯功能。Signalw 还提供了一个 npm 包，让你可以轻松地在前端项目中集成实时...

    3 年前
  • npm 包 css-in-js-generator 使用教程

    在前端开发中，CSS 是不可避免的部分，但是传统的 CSS 存在许多问题，例如全局命名冲突、选择器优先级问题等等，这些问题会导致代码难以维护和调试。因此，CSS-in-JS 技术应运而生，它将 CSS...

    3 年前
  • npm 包 node-vue2-qq 使用教程

    介绍 node-vue2-qq 是一个基于 Node.js 和 Vue.js 的快速开发脚手架，其中包含了腾讯 QQ 接口的配置，方便开发者在自己的项目中快速接入 QQ 登陆和分享功能。

    3 年前
  • npm 包 publiqjs-lib 使用教程

    在前端开发中，经常会用到各种各样的 npm 包，其中一个非常实用的是 publiqjs-lib，这是一款钱包库，可以用来生成钱包地址、签名交易等操作。本文将详细介绍该库的使用方法。

    3 年前
  • npm 包 react-native-cloudipsp-nfc 使用教程

    本文介绍了如何使用 npm 包 react-native-cloudipsp-nfc 实现在 React Native 移动应用中的 NFC 支付功能。本文从以下几个方面详细阐述了 react-nat...

    3 年前
  • npm包angular4-dragdrop使用教程

    前言 在前端开发中，拖拽是一个非常常见的需求，针对拖拽的需求，现有的库对于拖拽的支持和封装也非常的完善。今天我们来介绍一款基于angular4的npm包 angular4-dragdrop，该包提供了...

    3 年前
  • npm 包 draft-js-plugins-fork 使用教程

    前言 在前端开发中，有时我们需要实现一个带有富文本编辑器的功能，以方便用户编辑出美观的文章或者内容。draft-js 是一个 Facebook 推出的富文本编辑器库，是目前最为流行的富文本编辑器之一。

    3 年前
  • npm 包 react-motion-scroll 使用教程

    react-motion-scroll 是一个非常有用的 React 组件，它可以帮助我们实现在页面滚动时元素的动画效果。本文将介绍如何使用 react-motion-scroll 来实现动态效果，并...

    3 年前

相关推荐

    暂无文章