Mit der KLineChart-Funktion wird die Gestaltung von Strategie-Diagrammen vereinfacht

Schriftsteller:Kleine Träume, Erstellt: 2022-07-01 15:54:06, aktualisiert: 2023-09-18 20:11:05

img

Mit der KLineChart-Funktion wird die Gestaltung von Strategie-Diagrammen vereinfacht

Bei der Gestaltung von Strategien ist es häufig notwendig, ein Strategie-Diagramm zu entwerfen. Wie kann man mit nur wenigen Schriften ein reichhaltiges Strategie-Diagramm entwerfen?

Diese einfache, aber leistungsstarke Grafik kann man in der Pine-Sprache sehen, die für ihre reichhaltigen Grafikfunktionen bekannt ist. Wenn die Grafik-Schnittstelle der Pine-Sprache in die Strategien von JavaScript und Python integriert werden kann, ist die Grafik-Funktion für die Entwickler sehr einfach.KLineChartDie Funktion kann die Grafiken anpassen. Sie können die API-Dokumentation lesen:https://www.fmz.com/api#klinechart

Lassen Sie uns ein einfaches Beispiel schreiben, wie wir mit JavaScript übergehen können.

Ein einfaches Beispiel

/*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)
    }
}

Das Beispiel ist sehr einfach: Man zeichnet einfach K-Stränge in der Custom Graph-Region der Strategie und zieht eine Transaktionskurve für jede K-Stränge BAR an der Untergraph-Position des Graphs.

img

Das ist der erste Punkt, den wir in unserem Code verwenden.var c = KLineChart()Es wird ein Graphobjekt erstellt, dessen Methode dann zur Graphisierung genutzt wird. In einem Loop erhält man dann K-Liniendaten (Arraystruktur) und durchläuft die K-Linien.

Die Grafik wird vonc.begin(bar)Die Funktion beginnt.c.close()Die Funktion ist beendet.begincloseFunktionen sind Methoden für Chartobjekte c. Die häufigste Grafikfunktion wird hier verwendet.plotZeichnen Sie eine Transaktionskurve für jede BAR.

Ein komplizierter Beispiel

Wenn wir ein Diagramm mit einem Brin-Indikator entwerfen möchten. Oh ja!

/*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()
        })
    
        // 策略交易逻辑
        // ...
        // ..
    }
}

Wie man in dem Code sehen kann, haben wir auf der FMZ-Plattform die Rückmessungskonfigurationsinformationen:

/*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"}]
*/

Bei dieser Konfiguration wurde ein Gegenstands-Retest-Test mit Binance durchgeführt, der wie folgt funktioniert:

img

Sie sehen, dass wir die Art und Weise, wie wir mit Pine zeichnen, verwenden, um das Zeichnen in JavaScript sehr zu vereinfachen.

Datendiagramme wie Indikatoren schreiben

Diese Operationen, die K-Line-Daten erfassen und Kennzahlen berechnen, sind in den Strategienparametern und in den API-Dokumentationen des Plattform-Strategiesquares häufig und sehr einfach.

        // 获取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)

布林指标计算函数TA.BOLL,如果不指定布林指标参数,就使用默认参数BOLL(20, 2)Die Boll-Anzeige hat drei Linien, so dass die TA.BOLL-Funktion die Daten einer zweidimensionalen Matrix zurückgibt. Boll[0], Boll[1] und Boll[2] sind die drei Elemente der Boll-Matrix, die jeweils eine Linie und eine Matrix darstellen.

  • Boll[0]: Brin Band ist online
  • Boll[1]: Mittellinie des Bollbands
  • Boll[2]: Boll-Band unten

Dann sehen wir, wie wir das Volumen der K-Linien-Daten in Transaktionsmengen und die berechneten Brin-Indikatoren-Daten auf dem Diagramm darstellen.

Wir zeichnen die Daten von K-Linien Bar für Bar ab, also wollen wir die gesamte K-Linien-Array durchlaufen, also die Array der Bars im Code; hier wird verwendet.forEachDie Methode kann durchlaufen werden, aber auch mit der Schreibweise der For-Schleife.

        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()
        })

Es ist wichtig zu beachten, dass man bei jedem Beginn einer Abbildung in einem Bar-Chart zuerstc.begin(bar)FunktionsanrufebeginDie Funktion ist eine Methode für unsere Grafikobjekte c.c.close()Ich bin hier.beginFunktionen undcloseZwischen den Funktionen befinden sich die Grafikfunktionen, die wir ähnlich wie die Grafikform der Pine-Sprache anrufen.barcolor bgcolor plot fill hline plotarrow plotshape plotchar plotcandle signalDiese Funktionen können Linien, Pfeile, Markierungen usw. zeichnen.

Hinzufügen von Grafiken wie Signalpfeilen, Markierungen, Horizontalen

In der Grafikbeispiel für die oben beschriebenen Brin-Indikatoren wurden einige Handelssignal-Pfeile, Markierungen und horizontale Linien hinzugefügt.

/*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()
        })
    
        // 策略交易逻辑
        // ...
        // ..
    }
}

img

Da die Strategie in der Pine-Sprache ist, dass man automatisch Signale in einem Diagramm markiert, ist es wichtig zu wissen, dass die Symbole in der Pine-Sprache automatisch markiert werden, und dass die Symbole in der Pine-Sprache automatisch markiert werden.KLineChartDie Grafikobjekte, die von der Funktion erstellt werden, erweitern auch eine Funktion, die für das Zeichnen von Kauf- und Verkaufssignalmarkierungen verwendet wird:c.signal

Grafikkonfigurationsobjekt

Eine Struktur kann erklärt werden, um den Chart-Stil zu konfigurieren, z. B. die folgende ChartCfg-Variable, die die Konfigurationsinformationen für eine Gitterlinie darstellt.

    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]
            }
        },
    }

Die Grafikkonfigurationsobjekte sind Datenstrukturen, in denen einige Eigenschaften des Diagramms festgelegt werden, wie z. B. eine Grid-Stilkonfiguration. Es gibt viele Optionen, die konfiguriert werden können, wie z. B. die entsprechenden Einstellungen für die X-Axis, die Y-Axis, die Einstellungen für Lichtstrahlen, die Einstellungen für Hinweise, die Einstellungen für Technische Indikatoren, die Einstellungen für die K-Line BAR-Stile usw.

Natürlich, wenn Sie nicht mit all dem vertraut sind, dann rufen SieKLineChartFunktionen können keine Graphkonfigurationsobjekte übermitteln, wenn sie Graphobjekte erstellen.KLineChartDie Funktion erstellt ein Diagrammobjekt:

var c = KLineChart(chartCfg)

Die Test-Code für die Rasterlinie:

/*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()
        })
    
        // 策略交易逻辑
        // ...
        // ..
    }
}

img

Beispiele für die Gestaltung von Diagrammen

Sie können die Einstellungen für den Chartkonfigurationsstil verwenden.

{
    // 网格线
    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'
        }
    }
}

Das ist ein sehr schwieriges Thema, aber es ist auch ein sehr schwieriges Thema, denn es ist ein sehr schwieriges Thema.


Verwandt

Mehr