Utilisez la fonction KLineChart pour faciliter la conception du dessin de stratégie
Lors de la conception d'une stratégie, il est souvent nécessaire de concevoir un affichage graphique de stratégie lors de l'utilisation de JavaScript ou de Python pour écrire la stratégie. Les utilisateurs qui ne sont pas familiers avec la programmation ou la bibliothèque de graphiques utilisée par la plate-forme FMZ ont souvent du mal avec la conception du code pour dessiner sur des graphiques personnalisés. Alors, comment pouvons-nous dessiner un tableau de stratégie avec un contenu riche en écrivant seulement une petite quantité de code ?
Cette méthode de dessin simple mais puissante peut être observée dans le langage Pine, célèbre pour ses riches fonctions de dessin. Si l'interface de dessin du langage Pine peut être connectée aux stratégies des langages JavaScript et Python, cela facilitera grandement la conception de la fonction de dessin de la stratégie par les développeurs. Sur la base de cette demande, la plate-forme FMZ a mis à niveau la fonction de dessin personnalisé et étendu son utilisation.KLineChartLa fonction effectue le dessin de graphiques personnalisés. Vous pouvez vous référer à la documentation de l'API : https://www.fmz.com/api#klinechart
Utilisons JavaScript pour écrire un exemple simple pour réaliser une transition.
Exemple simple
javascript
/*backtest
start: 2022-03-21 09:00:00
end: 2022-06-21 15:00:00
period: 30m
basePeriod: 15m
exchanges: [{"eid":"Binance","currency":"BTC_USDT"}]
*/
function main() {
var c = KLineChart()
while (true) {
var bars = _C(exchange.GetRecords)
for (var i = 0 ; i < bars.length ; i++) {
var bar = bars[i]
c.begin(bar)
c.plot(bar.Volume, "volume")
c.close()
}
Sleep(1000)
}
}
Cet exemple est très simple. Il dessine simplement un graphique en chandeliers dans la zone de dessin personnalisée de la stratégie et dessine une courbe de volume correspondant à chaque BARRE de chandelier dans la position de sous-graphique du graphique.
Dans le code, nous utilisons d'abordvar c = KLineChart()Créez un objet graphique, puis appelez ses méthodes pour dessiner. Ensuite, dans la boucle, nous obtenons les données de la ligne K (structure du tableau) et parcourons le tableau de la ligne K. Vous pouvez utiliser une boucle for simple pour parcourir comme dans l'exemple, ou vous pouvez utiliser d'autres méthodes pour parcourir.
Les opérations de dessin doivent être effectuées à partir dec.begin(bar)La fonction démarre,c.close()La fonction se termine.begin、closeLes fonctions sont des méthodes de l'objet graphique c. Ensuite, utilisez la fonction de dessin la plus couramment utiliséeplotDessinez la courbe de volume sur chaque BARRE.
Un exemple plus complexe
Supposons que nous voulions concevoir un graphique avec des indicateurs de Bollinger. Oh oui! Il est également nécessaire de joindre un tableau de volume pour chaque BAR, qui peut être conçu comme ceci :
javascript
/*backtest
start: 2022-03-21 09:00:00
end: 2022-06-21 15:00:00
period: 1d
basePeriod: 1h
exchanges: [{"eid":"Binance","currency":"BTC_USDT"}]
*/
function main() {
var c = KLineChart()
// 策略主循环
while(true) {
// 轮询间隔
Sleep(500)
// 获取K线数据
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
continue
}
// 计算布林指标
var boll = TA.BOLL(bars)
bars.forEach(function(bar, index) {
c.begin(bar)
// 画图操作
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // 画在图表主图
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // 画在图表主图
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // 画在图表主图
c.plot(bar.Volume, "volume") // 画在图表副图
c.close()
})
// 策略交易逻辑
// ...
// ..
}
}
Vous pouvez voir dans le code que nos informations de configuration de backtest sur la plateforme FMZ sont :
python
/*backtest
start: 2022-03-21 09:00:00
end: 2022-06-21 15:00:00
period: 1d
basePeriod: 1h
exchanges: [{"eid":"Binance","currency":"BTC_USDT"}]
*/
Cette configuration est testée à l'aide de l'objet d'échange spot Binance. Les résultats du test sont présentés dans la figure :
On peut voir que nous utilisons la méthode de dessin de Pine pour simplifier considérablement le code de dessin en langage JavaScript.
Écrire des indicateurs et d'autres données pour dessiner des images
Des opérations telles que l'obtention de données K-line et le calcul d'indicateurs sont courantes et très simples dans les exemples de stratégie et les documents API du carré de stratégie de la plateforme.
javascript
// 获取K线数据
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
// 如果获取K线失败，即!bar为真则执行continue，忽略之后的代码，重新执行循环
// 如果bars.length小于等于20，即K线BAR（柱）数量小于20，无法计算指标，也执行continue
continue
}
// 计算布林指标
var boll = TA.BOLL(bars)
Fonction de calcul de l'indicateur Bollinger TA.BOLL, si vous ne spécifiez pas les paramètres de l'indicateur Bollinger, les paramètres par défaut sont utilisésBOLL(20, 2). L'indicateur Bollinger comporte trois lignes, les données renvoyées par la fonction TA.BOLL sont donc un tableau bidimensionnel. capsule[0]、boll[1]、boll[2] sont les trois éléments du tableau boll, chacun représentant une ligne et étant un tableau.
- boll[0]: Bandes de Bollinger en ligne
- boll[1] : Ligne médiane des bandes de Bollinger
- boll[2] : Bandes de Bollinger en baisse
Nous verrons ensuite comment dessiner le volume des données de la ligne K, c'est-à-dire le volume des transactions, et les données de l'indicateur Bollinger calculées sur le graphique.
Nous dessinons les données de la ligne K barre par barre, nous devons donc parcourir l'intégralité du tableau de la ligne K, c'est-à-dire parcourir le tableau des barres dans le code. Ici nous utilisonsforEachLa traversée de méthode peut également être parcourue à l'aide de la boucle for.
javascript
bars.forEach(function(bar, index) {
c.begin(bar)
// 画图操作
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // {overlay: true}参数控制，画在图表主图
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // 画在图表主图
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // 画在图表主图
c.plot(bar.Volume, "volume") // 画在图表副图
c.close()
})
Il convient de noter que chaque fois que vous commencez à dessiner un graphique sur une barre, vous devez d'abordc.begin(bar)Appels de fonctions,beginUne fonction est une méthode de notre objet graphique c. Lorsque l'opération de dessin est terminée, vous devez appelerc.close(). existerbeginFonctions etcloseEntre les fonctions se trouvent les fonctions de dessin que nous appelons qui sont similaires à la méthode de dessin du langage Pine. soutien:barcolor bgcolor plot fill hline plotarrow plotshape plotchar plotcandle signal, vous pouvez dessiner des lignes, des flèches, marquer des informations, etc. Les paramètres de ces fonctions sont cohérents avec les paramètres de fonction correspondants du langage Pine, et les fonctions de dessin sont également cohérentes.
Ajout de flèches de signaux de trading, de marqueurs, de lignes horizontales et d'autres dessins
Ajoutez des flèches de signal de trading, des marqueurs et des lignes horizontales à l’exemple de dessin d’indicateur Bollinger ci-dessus.
javascript
/*backtest
start: 2022-03-21 09:00:00
end: 2022-06-21 15:00:00
period: 1d
basePeriod: 1h
exchanges: [{"eid":"Binance","currency":"BTC_USDT"}]
*/
function main() {
var c = KLineChart()
// 策略主循环
while(true) {
// 轮询间隔
Sleep(500)
// 获取K线数据
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
continue
}
// 计算布林指标
var boll = TA.BOLL(bars)
bars.forEach(function(bar, index) {
c.begin(bar)
// 画图操作
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // 画在图表主图
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // 画在图表主图
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // 画在图表主图
c.plot(bar.Volume, "volume") // 画在图表副图
c.hline(bar.Open, {overlay: true}) // 水平线
c.plotarrow(bar.Close - bar.Open, {overlay: true}) // 箭头
c.plotshape(bar.Close - bar.Open > 0, {style: 'square', overlay: true}) // 画方块标记
c.plotchar(bar.Close - bar.Open < 0, {char: '❄', size: "20px", overlay: true}) // 画出字符❄
if (boll[0][index] && bar.Close > boll[0][index]) {
c.signal("long", bar.Close, 1.5)
} else if (boll[2][index] && bar.Close < boll[2][index]) {
c.signal("closelong", bar.Close, 1.5)
}
c.close()
})
// 策略交易逻辑
// ...
// ..
}
}
Étant donné que l'opération d'ordre de stratégie linguistique Pine marquera automatiquement le signal sur le graphique,KLineChartL'objet graphique créé par la fonction est également étendu avec une fonction permettant de dessiner des marqueurs de signaux d'achat et de vente :c.signal。
Objet de configuration de graphique
Vous pouvez déclarer une structure pour configurer le style du graphique. Par exemple, la variable chartCfg suivante représente les informations de configuration d'une ligne de grille.
javascript
var chartCfg = {
grid: {
show: true,
// 网格水平线
horizontal: {
show: true,
size: 2,
color: '#FF0000', // 水平网格线的颜色
// 'solid'|'dash'
style: 'dash', // 线的类型
dashValue: [2, 2]
},
// 网格垂直线
vertical: {
show: true,
size: 2,
color: '#32CD32',
// 'solid'|'dash'
style: 'solid',
dashValue: [2, 2]
}
},
}
L'objet de configuration de graphique est une structure de données qui définit certaines propriétés et l'apparence du graphique. Par exemple, l'exemple utilise une configuration de style de ligne de grille. Il existe également de nombreuses options qui peuvent être configurées et modifiées, telles que les paramètres associés à l'axe X et à l'axe Y, les paramètres de la ligne du curseur, les paramètres des informations d'invite, les paramètres du style de l'indicateur technique, le paramètres du style K-line BAR, etc.
Bien sûr, si vous n’êtes pas familier avec ceux-ci,KLineChartLa fonction n’a pas besoin de transmettre un objet de configuration de graphique lors de la création d’un objet de graphique. Le graphique créé est du style par défaut. Utilisation des fonctions API de la plateforme FMZKLineChartFonction pour créer un objet graphique :
javascript
var c = KLineChart(chartCfg)
Code de test pour dessiner des lignes de grille :
javascript
/*backtest
start: 2022-03-21 09:00:00
end: 2022-06-21 15:00:00
period: 1d
basePeriod: 1h
exchanges: [{"eid":"Binance","currency":"BTC_USDT"}]
*/
function main() {
var chartCfg = {
grid: {
show: true,
// 网格水平线
horizontal: {
show: true,
size: 2,
color: '#FF0000',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
},
// 网格垂直线
vertical: {
show: true,
size: 2,
color: '#32CD32',
// 'solid'|'dash'
style: 'solid',
dashValue: [2, 2]
}
},
}
var c = KLineChart(chartCfg)
// 策略主循环
while(true) {
// 轮询间隔
Sleep(500)
// 获取K线数据
var bars = _C(exchange.GetRecords)
bars.forEach(function(bar, index) {
c.begin(bar)
c.close()
})
// 策略交易逻辑
// ...
// ..
}
}
Exemple de style de configuration de graphique
Peut être utilisé pour référencer les paramètres du style de configuration du graphique.
javascript
{
// 网格线
grid: {
show: true,
// 网格水平线
horizontal: {
show: true,
size: 1,
color: '#393939',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
},
// 网格垂直线
vertical: {
show: false,
size: 1,
color: '#393939',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
}
},
// 蜡烛图
candle: {
// 蜡烛图上下间距，大于1为绝对值，大于0小余1则为比例
margin: {
top: 0.2,
bottom: 0.1
},
// 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
type: 'candle_solid',
// 蜡烛柱
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
// 面积图
area: {
lineSize: 2,
lineColor: '#2196F3',
value: 'close',
backgroundColor: [{
offset: 0,
color: 'rgba(33, 150, 243, 0.01)'
}, {
offset: 1,
color: 'rgba(33, 150, 243, 0.2)'
}]
},
priceMark: {
show: true,
// 最高价标记
high: {
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal'
},
// 最低价标记
low: {
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal',
},
// 最新价标记
last: {
show: true,
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888',
line: {
show: true,
// 'solid'|'dash'
style: 'dash',
dashValue: [4, 4],
size: 1
},
text: {
show: true,
size: 12,
paddingLeft: 2,
paddingTop: 2,
paddingRight: 2,
paddingBottom: 2,
color: '#FFFFFF',
family: 'Helvetica Neue',
weight: 'normal',
borderRadius: 2
}
}
},
// 提示
tooltip: {
// 'always' | 'follow_cross' | 'none'
showRule: 'always',
// 'standard' | 'rect'
showType: 'standard',
labels: ['时间', '开', '收', '高', '低', '成交量'],
values: null,
defaultValue: 'n/a',
rect: {
paddingLeft: 0,
paddingRight: 0,
paddingTop: 0,
paddingBottom: 6,
offsetLeft: 8,
offsetTop: 8,
offsetRight: 8,
borderRadius: 4,
borderSize: 1,
borderColor: '#3f4254',
backgroundColor: 'rgba(17, 17, 17, .3)'
},
text: {
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
color: '#D9D9D9',
marginLeft: 8,
marginTop: 6,
marginRight: 8,
marginBottom: 0
}
}
},
// 技术指标
technicalIndicator: {
margin: {
top: 0.2,
bottom: 0.1
},
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
line: {
size: 1,
colors: ['#FF9600', '#9D65C9', '#2196F3', '#E11D74', '#01C5C4']
},
circle: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
// 最新值标记
lastValueMark: {
show: false,
text: {
show: false,
color: '#ffffff',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 3,
paddingTop: 2,
paddingRight: 3,
paddingBottom: 2,
borderRadius: 2
}
},
// 提示
tooltip: {
// 'always' | 'follow_cross' | 'none'
showRule: 'always',
// 'standard' | 'rect'
showType: 'standard',
showName: true,
showParams: true,
defaultValue: 'n/a',
text: {
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
color: '#D9D9D9',
marginTop: 6,
marginRight: 8,
marginBottom: 0,
marginLeft: 8
}
}
},
// x轴
xAxis: {
show: true,
height: null,
// x轴线
axisLine: {
show: true,
color: '#888888',
size: 1
},
// x轴分割文字
tickText: {
show: true,
color: '#D9D9D9',
family: 'Helvetica Neue',
weight: 'normal',
size: 12,
paddingTop: 3,
paddingBottom: 6
},
// x轴分割线
tickLine: {
show: true,
size: 1,
length: 3,
color: '#888888'
}
},
// y轴
yAxis: {
show: true,
width: null,
// 'left' | 'right'
position: 'right',
// 'normal' | 'percentage' | 'log'
type: 'normal',
inside: false,
reverse: false,
// y轴线
axisLine: {
show: true,
color: '#888888',
size: 1
},
// y轴分割文字
tickText: {
show: true,
color: '#D9D9D9',
family: 'Helvetica Neue',
weight: 'normal',
size: 12,
paddingLeft: 3,
paddingRight: 6
},
// y轴分割线
tickLine: {
show: true,
size: 1,
length: 3,
color: '#888888'
}
},
// 图表之间的分割线
separator: {
size: 1,
color: '#888888',
fill: true,
activeBackgroundColor: 'rgba(230, 230, 230, .15)'
},
// 十字光标
crosshair: {
show: true,
// 十字光标水平线及文字
horizontal: {
show: true,
line: {
show: true,
// 'solid'|'dash'
style: 'dash',
dashValue: [4, 2],
size: 1,
color: '#888888'
},
text: {
show: true,
color: '#D9D9D9',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderSize: 1,
borderColor: '#505050',
borderRadius: 2,
backgroundColor: '#505050'
}
},
// 十字光标垂直线及文字
vertical: {
show: true,
line: {
show: true,
// 'solid'|'dash'
style: 'dash',
dashValue: [4, 2],
size: 1,
color: '#888888'
},
text: {
show: true,
color: '#D9D9D9',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderSize: 1,
borderColor: '#505050',
borderRadius: 2,
backgroundColor: '#505050'
}
}
},
// 图形
shape: {
point: {
backgroundColor: '#2196F3',
borderColor: '#2196F3',
borderSize: 1,
radius: 4,
activeBackgroundColor: '#2196F3',
activeBorderColor: '#2196F3',
activeBorderSize: 1,
activeRadius: 6
},
line: {
// 'solid'|'dash'
style: 'solid'
color: '#2196F3',
size: 1,
dashValue: [2, 2]
},
polygon: {
// 'stroke'|'fill'
style: 'stroke',
stroke: {
// 'solid'|'dash'
style: 'solid',
size: 1,
color: '#2196F3',
dashValue: [2, 2]
},
fill: {
color: 'rgba(33, 150, 243, 0.1)'
}
},
arc: {
// 'stroke'|'fill'
style: 'stroke',
stroke: {
// 'solid'|'dash'
style: 'solid',
size: 1,
color: '#2196F3',
dashValue: [2, 2]
},
fill: {
color: '#2196F3'
}
},
text: {
style: 'fill',
color: '#2196F3',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
offset: [0, 0]
}
},
annotation: {
// 'top' | 'bottom' | 'point'
position: 'top',
offset: [20, 0]
symbol: {
// 'diamond' | 'circle' | 'rect' | 'triangle' | 'custom' | 'none'
type: 'diamond',
size: 8,
color: '#2196F3',
activeSize: 10,
activeColor: '#FF9600'
}
},
tag: {
// 'top' | 'bottom' | 'point'
position: 'point',
offset: 0,
line: {
show: true,
style: LineStyle.DASH,
dashValue: [4, 2],
size: 1,
color: '#2196F3'
},
text: {
color: '#FFFFFF',
backgroundColor: '#2196F3',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderRadius: 2,
borderSize: 1,
borderColor: '#2196F3'
},
mark: {
offset: 0,
color: '#FFFFFF',
backgroundColor: '#2196F3',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderRadius: 2,
borderSize: 1,
borderColor: '#2196F3'
}
}
}
Cela ne facilite-t-il pas l’élaboration et la conception de stratégies ?
梦总，感谢分享！
我请教一个场景，不知道现阶段使用KLineChart能否实现。 具体场景说明：
1、策略是多品种交易 ；
2、加载策略的时候，默认指定的品种进行图表的绘制，包括K线、指标、交易信号等等；
3、通过筛选框，选择其他的交易品种，获取历史K线绘制图表，直到当前时间对应的K线。
目的在于通过图表直接观察各个交易品种是否是合理开平仓的，交易是否正常。
1、策略是多品种交易 ；
对于多图表，KLineChart 函数不支持，可以使用画图接口Chart函数，可以参考多图表画线类库的设计。
2、加载策略的时候，默认指定的品种进行图表的绘制，包括K线、指标、交易信号等等；
单图表可以实现。
3、通过筛选框，选择其他的交易品种，获取历史K线绘制图表，直到当前时间对应的K线。
单图表可以实现，可以具体编写代码查询历史K线数据然后填充画图.
如果是多品种策略，建议使用Chart函数画图。KLineChart 函数目前只能单图表画图。
- 1