在前端开发中，使用专业的图表工具来展示数据是非常重要的。@oskarer/techan 是一个非常好用的 JavaScript 技术包，用于创建各种类型的股票和金融图表。本文将详细介绍如何使用 @oskarer/techan 包来展示图表并生成数据。
安装 @oskarer/techan 包
在使用 @oskarer/techan 包之前，需要安装它。可以通过以下命令来安装 @oskarer/techan 包：
npm install @oskarer/techan
基本介绍
techan 模块包含以下方法：
plot.*：图表绘制方法。indicator.*：技术指标算法。scale.*：变换数据到屏幕空间的方法。svg.*：SVG元素的创建方法。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 线图。
// 创建烛台绘制器 var candlestick = techan.plot.candlestick().xScale(x).yScale(y); // 将烛台绘制器添加到 `plot` 元素中 plot.addItem(candlestick); // 绘制图表 svg.call(plot);
使用 techan.plot.candlestick() 方法创建一个新的烛台绘制器，并将其作为 plot 元素的子元素添加到 plot 中。然后，使用 svg.call() 方法将 plot 元素绘制到 <svg> 元素中。
添加 MA 指标
MA 指标展示了股票价格的一些趋势。在 @oskarer/techan 中，使用 techan.plot.sma 方法来绘制 MA 指标。
// 创建 SMA 绘制器 var sma = techan.plot.sma().xScale(x).yScale(y).period(20); // 将 SMA 绘制器添加到 `plot` 元素中 plot.addItem(sma); // 绘制图表 svg.call(plot);
使用 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