npm 包 ember-techan 使用教程

简介

ember-techan 是一个基于 techan.js 的 Ember.js 组件库。techan.js 是一个用于创建技术分析图表的 JavaScript 库。它提供了各种类型的图表，包括股票走势线、均线、K 线图等等。ember-techan 将这些图表封装成组件，方便我们在 Ember.js 应用程序中使用。

在本篇文章中，我们将学习如何使用 ember-techan 构建技术分析图表，并通过示例代码来演示如何使用这个组件库。

安装

使用 npm 安装 ember-techan：

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

使用

组件列表

ember-techan 提供了以下几个组件：

• candlestick-chart: 蜡烛图
• ohlc-chart: OHLC 图
• volume-chart: 成交量图
• macd-chart: MACD 指标图
• rsi-chart: RSI 指标图

示例代码

我们将使用 candlestick-chart 组件来创建一个蜡烛图。假设我们有以下数据需要展示：

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

我们可以在模板文件中使用 candlestick-chart 组件来展示蜡烛图：

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

这里我们将 data 数据传递给组件，并指定了宽度和高度。如果需要在组件中使用一些其他的配置，可以在组件后面添加自定义属性。

组件自定义属性

以下是 candlestick-chart 组件支持的自定义属性：

• data (array, required): 所有的数据
• width (number): 图表宽度，默认为 600
• height (number): 图表高度，默认为 400
• margin (object): 图表边距，默认为 { top: 10, right: 10, bottom: 20, left: 40 }
• showVolume (boolean): 是否显示成交量图，默认为 false
• volumeHeight (number): 成交量图高度，默认为 100
• showXAxis (boolean): 是否显示 X 轴，默认为 true
• showYAxis (boolean): 是否显示 Y 轴，默认为 true

参数解释

• data: 传递给组件的数据。其中每一项需包含以下属性：
  • date: 时间戳，可以使用 new Date() 来转换
  • open: 开盘价
  • high: 最高价
  • low: 最低价
  • close: 收盘价
  • volume: 成交量
• width 和 height: 图表的宽度和高度，单位为像素。
• margin: 图表边距。根据需要可以调整 top、right、bottom 和 left 的值。这些值的设定会影响到图表的布局。
• showVolume: 是否显示成交量图。
• volumeHeight: 成交量图的高度。
• showXAxis 和 showYAxis: 是否显示 X 和 Y 轴。

总结

在使用 ember-techan 构建技术分析图表时，我们需要考虑以下几个方面：

• 数据结构和数据类型
• 组件列表和功能
• 自定义属性

通过本篇文章的学习，相信大家已经对如何使用 ember-techan 有了深入的了解。我希望这篇文章能够对大家的学习、开发和实践都有所帮助。

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