@dickyindra/klinecharts
Version:
Lightweight k-line chart built with html5 canvas
189 lines (165 loc) • 6.34 kB
Markdown
| **指标名** | **默认计算参数** | **指标名** | **默认计算参数** | **指标名** | **默认计算参数** |
| :---: | :---: | :---: | :---: | :---: | :---: |
| MA | [5, 10, 30, 60] | BIAS | [6, 12, 24] | VR | [24, 30] |
| EMA | [6, 12, 20] | BRAR | [26] | WR | [6, 10, 14] |
| SMA | [12, 2] | CCI | [13] | MTM | [6, 10] |
| BBI | [3, 6, 12, 24] | DMI | [14, 6] | EMV | [14, 9] |
| VOL | [5, 10, 20] | CR | [26, 10, 20, 40, 60] | SAR | [2, 2, 20] |
| MACD | [12, 26, 9] | PSY | [12, 6] | AO | [5, 34] |
| BOLL | [20] | DMA | [10, 50, 10] | ROC | [12, 6] |
| KDJ | [9, 3, 3] | TRIX | [12, 20] | PVT | 无 |
| RSI | [6, 12, 24] | OBV | [30] | AVP | 无 |
想要完成一个自定义技术指标，只需要生成一个技术指标信息，然后通过`extension.addTechnicalIndicatorTemplate`全局添加，或者通过图表实例方法 `addTechnicalIndicatorTemplate`为单个图表实例添加即可。添加到图表即可和内置技术指标一样去使用。
```javascript
{
// 技术指标名字，必要字段，是技术指标的唯一标识
name: 'xxx',
// 用于提示显示
shortName: 'xxx',
// 技术指标计算方法，必要字段
// 该字段是一个回调方法，回调参数是当前图表的源数据和计算的参数，需要返回一个数组或者一个promise
// kLineDataList 图表的原始数据
// params 计算参数
// plots 技术指标数据配置项
calcTechnicalIndicator: (kLineDataList, { params, plots }) => { return [] },
// 系列
series: 'normal',
// 精度，可缺省，默认为4
precision: 4,
// 计算参数，是一个数组，可缺省，可以是数字也可以是`{ value, allowDecimal }`
calcParams: [],
// 数据配置项，是一个数组
plots: [],
// 是否需要检查计算参数，可缺省，默认为true
// 如果为true，当设置指标参数时，如果参数个数和默认的参数个数不一致，将不能生效
shouldCheckParamCount: true,
// 是否需要格式化大数据值
shouldFormatBigNumber: false,
// 是否需要辅助ohlc线
shouldOhlc: false,
// 指定的最小值，可缺省
// 如果设置，在计算y轴上最小值时将以此为准
minValue: null,
// 指定的最大值，可缺省
// 如果设置，在计算y轴上最大值时将以此为准
maxValue: null,
// 样式，可缺省，缺省则同步样式配置
styles: null,
// 重新生成plots，是一个回调方法，可缺省
// 当计算参数发生改变时触发
// 返回值需要一个plots
regeneratePlots: (params) => { return [] },
// 生成tooltip显示的数据，返回格式`{ title: 'xxx', value: 'xxx', color: 'xxx' }`的数组，可缺省
// dataSource 数据源
// viewport 尺寸信息
// crosshair 十字光标信息
// technicalIndicator 技术指标信息
// xAxis x轴
// yAxis y轴
// defaultStyles 默认样式
createTooltipDataSource: ({
dataSource,
viewport,
crosshair,
technicalIndicator,
xAxis,
yAxis,
defaultStyles
}) => { return [] }
// 自定义渲染，可缺省，
// ctx canvas上下文
// dataSource 数据源，包含了原始的k线数据和计算出来的指标数据以及起始绘制点位置
// viewport 尺寸信息
// styles 样式
// xAxis x轴
// yAxis y轴
render: ({
ctx,
dataSource,
viewport,
styles,
xAxis,
yAxis
}) => {}
}
```
```javascript
{
// 必要字段，决定方法calcTechnicalIndicator的返回值
key: '',
// 可缺省，主要用于提示
title: '',
// 可缺省，绘制类型，目前支持'line', 'circle'和'bar'
type: '',
// 基础比对数据，可缺省
// 如果设置，当图形是bar时，将在此值上下绘制，如：MACD指标的macd值
baseValue: null,
// 可缺省
// 可以是一个固定的值，也可以是一个方法，如果是方法，需要返回一个颜色值的字符串
color: (data, options) => {},
// 可缺省，只有当type是'circle'和'bar'才会生效
// 可以是一个固定的boolean值，也可以是一个方法，如果是方法，需要返回一个boolean值
isStroke: (data, options) => {}
}
```
以下将以一个名为'MA'技术指标，一步步的介绍如何去做技术指标模板。
首先确定计算参数(calcParams)和配置项(plots)，'MA'技术指标需要展示两个周期的收盘价平均值连起来的线，一条为'ma1'，一条名为'ma2'。因此plots配置为：
```javascript
{
// 计算参数是2个，一个计算5个周期时间的均值，即'ma1'，另一个计算10个周期时间的均值，即'ma10'
calcParams: [5, 10],
plots: [
// 第一条线'ma5'
{ key: 'ma1', title: 'MA5: ', type: 'line' },
// 第二条线'ma10'
{ key: 'ma2', title: 'MA10: ', type: 'line' }
]
}
```
确定其它属性
```javascript
{
name: 'MA',
shortName: 'MA',
calcParams: [5, 10],
plots: [
{ key: 'ma1', title: 'MA5: ', type: 'line' },
{ key: 'ma2', title: 'MA10: ', type: 'line' }
],
// 当计算参数改变时，希望提示的和参数一样，即title的值需要改变
regeneratePlots: (params) => {
return params.map((p, i) => {
return { key: `ma${i + 1}`, title: `MA${p}: `, type: 'line' }
})
},
// 计算结果
calcTechnicalIndicator: (kLineDataList, { params, plots }) => {
// 注意：返回数据个数需要和kLineDataList的数据个数一致，如果无值，用{}代替即可。
// 计算参数最好取回调参数params，如果不是，后续计算参数发生变化的时候，这里计算不能及时响应
const closeSums = []
return kLineDataList.map((kLineData, i) => {
const ma = {}
const close = kLineData.close
params.forEach((param, j) => {
closeSums[j] = (closeSums[j] || 0) + close
if (i >= param - 1) {
ma[plots[j].key] = closeSums[j] / param
closeSums[j] -= dataList[i - (param - 1)].close
}
})
// 如果有值的情况下，这里每一项的数据格式应该是 { ma1: xxx, ma2: xxx }
// 每个key需要和plots中的子项key对应的值一致
return ma
})
}
}
```