npm 包 ember-techan 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

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

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

安装

使用 npm 安装 ember-techan：

$ npm install ember-techan --save

使用

组件列表

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

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

示例代码

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

const data = [
  { date: new Date(2018, 1, 1), open: 100, high: 150, low: 70, close: 120, volume: 1000 },
  { date: new Date(2018, 1, 2), open: 120, high: 200, low: 90, close: 150, volume: 2000 },
  { date: new Date(2018, 1, 3), open: 150, high: 180, low: 110, close: 130, volume: 1300 },
  // ...
];

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

{{candlestick-chart
  data=data
  width=600
  height=400
}}

这里我们将 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