@dickyindra/klinecharts
Version:
Lightweight k-line chart built with html5 canvas
189 lines (167 loc) • 7.43 kB
Markdown
| **Indicator name** | **Default calculation parameters** | **Indicator name** | **Default calculation parameters** | **Indicator name** | **Default calculation parameters** |
| :---: | :---: | :---: | :---: | :---: | :---: |
| 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 | None |
| RSI | [6, 12, 24] | OBV | [30] | AVP | None |
To complete a technical indicator template, you only need to generate a technical indicator information, and then add it globally through `extension.addTechnicalIndicatorTemplate`, or add it for a single chart instance through the chart instance method `addTechnicalIndicatorTemplate`. Adding to the chart can be used like the built-in technical indicators.
```javascript
{
// The name of the technical indicator, a necessary field, is the only identifier of the technical indicator
name:'xxx',
// For tooltip display
shortName: 'xxx',
// Technical indicator calculation method, necessary fields
// This field is a callback method, the callback parameters are the source data and calculated parameters of the current chart, and an array or promise needs to be returned
// kLineDataList chart raw data
// params calculation parameters
// plots technical indicator data configuration item
calcTechnicalIndicator: (kLineDataList, { params, plots }) => { return [] },
// Series, can be the default
series: 'normal',
// Precision, can be the default, the default is 4
precision: 4,
// The calculation parameter is an array, which can be defaulted, number or { value, allowDecimal }
calcParams: [],
// The data configuration item is an array
plots: [],
// Do you need to check the calculation parameters, you can default it, the default is true
// If true, when setting indicator parameters, if the number of parameters is inconsistent with the default number of parameters, it will not take effect
shouldCheckParamCount: true,
// Do you need to format big data values
shouldFormatBigNumber: false,
// Do you need auxiliary ohlc line
shouldOhlc: false,
// The specified minimum value, which can be defaulted
// If set, this will prevail when calculating the minimum value on the y-axis
minValue: null,
// The specified maximum value can be defaulted
// If set, this will prevail when calculating the maximum value on the y-axis
maxValue: null,
// Style, can be the default, the default is to synchronize the style configuration
styles: null,
// Regenerate plots, which is a callback method, which can be defaulted
// trigger when the calculation parameter changes
// The return value needs a plots
regeneratePlots: (params) => {return [] },
// Generate the data displayed by the tooltip and return an array in the format `{ title: 'xxx', value: 'xxx', color: 'xxx' }`, which can be defaulted
// dataSource data source
// viewport size information
// crosshair crosshair information
// technicalIndicator technical indicator information
// xAxis x axis
// yAxis y axis
// defaultStyles default styles
createTooltipDataSource: ({
dataSource,
viewport,
crosshair,
technicalIndicator,
xAxis,
yAxis,
defaultStyles
}) => { return [] }
// Custom rendering, can be defaulted,
// ctx canvas context
// dataSource data source, including the original bar data and calculated indicator data as well as the starting point of drawing
// viewport size information
// styles style
// xAxis x-axis component
// yAxis y-axis component
render: ({
ctx,
dataSource,
viewport,
styles,
xAxis,
yAxis
}) => {}
}
```
```javascript
{
// Required fields, determine the return value of the method calcTechnicalIndicator
key: '',
// By default, mainly for prompt
title: '',
// By default, drawing type, currently supports'line','circle' and'bar'
type: '',
// By default, basic comparison data
// If set, when the graph is bar, it will be drawn above and below this value, such as: the macd value of the MACD indicator
baseValue: null,
// Zero value, default false
// If set true, when the graph is bar and 0 value, it will not be drawn.
zeroValue: false,
// By default
// Can be value or method, if it is a method, it needs to return a string of color values
color: (data, options) => {},
// By default, it only takes effect when type is 'circle' and 'bar'
// Can be a fixed boolean value or a method, if it is a method, it needs to return a boolean value
isStroke: (data, options) => {}
}
```
The following a technical indicator named 'MA' to introduce step by step how to make a technical indicator template.
First determine the calculation parameters (calcParams) and configuration items (plots). The 'MA' technical indicator needs to display the line connecting the average closing prices of the two periods, one is 'ma1' and the other is called 'ma2'. So the plots configuration is:
```javascript
{
// There are two calculation parameters, one calculates the average value of 5 cycle times, namely'ma1', and the other calculates the average value of 10 cycle times, namely'ma10'
calcParams: [5, 10],
plots: [
// the first line'ma5'
{ key: 'ma1', title: 'MA5: ', type: 'line' },
// second line'ma10'
{ key: 'ma2', title: 'MA10: ', type: 'line' }
]
}
```
Determine other attributes
```javascript
{
name:'MA',
calcParams: [5, 10],
plots: [
{key:'ma1', title:'MA5: ', type:'line' },
{key:'ma2', title:'MA10: ', type:'line'}
],
// When the calculation parameters are changed, I hope that the prompt is the same as the parameters, that is, the value of the title needs to be changed
regeneratePlots: (params) => {
return params.map((p, i) => {
return { key: `ma${i + 1}`, title: `MA${p}: `, type:'line' }
})
},
// Calculation results
calcTechnicalIndicator: (kLineDataList, { params, plots }) => {
// Note: The number of returned data needs to be consistent with the number of data in kLineDataList. If there is no value, just use {} instead.
// The calculation parameter is best to take the callback parameter calcParams, if not, when the subsequent calculation parameters change, the calculation here cannot respond in time
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
}
})
// If there is a value, the data format of each item here should be {ma1: xxx, ma2: xxx}
// Each key needs to be consistent with the value corresponding to the sub-item key in plots
return ma
})
}
}
```