KLineChart 함수를 사용하여 전략 그래프 디자인을 더 간단하게 만듭니다.

저자:작은 꿈, 창작: 2022-07-01 15:54:06, 업데이트: 2023-09-18 20:11:05

img

KLineChart 함수를 사용하여 전략 그래프 디자인을 더 간단하게 만듭니다.

설계 정책에는 종종 정책 차트를 설계해야 합니다. 자바스크립트 언어, 파이썬 언어를 사용하는 경우 프로그래밍에 익숙하지 않거나 FMZ 플랫폼을 사용하는 차트 라이브러리를 모르는 사용자는 종종 사용자 지정 차트에 그림을 그릴 수있는 코드를 설계하는 데 어려움을 겪습니다.

풍부한 그래프 기능으로 유명한 파인 언어에서 이러한 간단하면서도 기능이 강한 그래프 방식이 나타난다. 파인 언어의 그래프 인터페이스를 자바스크립트, 파이썬 언어의 전략에 액세스 할 수 있다면 개발자가 그래프 기능을 설계하는 전략을 매우 편리하게 할 수 있습니다. 그래서 FMZ 플랫폼은 이러한 요구를 기반으로 사용자 정의 그래프 기능을 업그레이드하고 사용 영역을 확장했습니다.KLineChart함수가 사용자 정의 그래프 도면을 만드는 방법.https://www.fmz.com/api#klinechart

자바스크립트 언어를 사용하여 간단한 예를 작성하기 전에 전환을 해보겠습니다.

간단한 예제

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

이 예는 매우 간단합니다. 전략의 사용자 정의 그래프 영역에 K줄을 그리는 것, 그리고 그래프의 하위 그래프 위치에서 각각의 K줄 BAR에 대응하는 트랜잭션 곡선을 그리는 것.

img

우리는 이 모든 것을var c = KLineChart()그래프 객체를 생성하고 그 다음 그 방법을 호출하여 그래프를 그리는 것입니다. 그러면 루프에서 우리는 K선 데이터를 (수직 구조) 얻으며 K선 배열에 대한 탐색 작업을 수행합니다. 예를 들어 간단한 for 루프 탐색을 사용하여 또는 다른 방법으로 탐색 할 수 있습니다.

이 그림은c.begin(bar)이 함수들은c.close()함수 끝입니다.beginclose함수는 그래프 객체 c의 방법이다. 다음으로 가장 일반적으로 사용되는 그래프 함수를 사용한다.plot각 BAR에 트랜잭션 곡선을 그리십시오.

조금 더 복잡한 예입니다.

만약 우리가 Brin 지표가 붙어 있는 그래프를 디자인하고 싶다면. 네! 그리고 각 BAR의 트랜잭션 라인 그래프가 붙어 있다면, 이렇게 디자인할 수 있습니다.

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

우리는 FMZ 플랫폼에서 재검토 설정 정보를 코드에서 볼 수 있습니다.

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

이 구성은 Binance 현금 거래소 객체 복원 테스트를 사용하여 다음과 같은 결과를 얻었습니다.

img

자바스크립트 언어의 도면 코드를 매우 단순화하기 위해 파이인의 도면 방식을 사용했음을 알 수 있습니다.

지표와 같은 데이터 그래프를 작성합니다.

K 라인 데이터를 획득하고 지표를 계산합니다. 이러한 작업은 플랫폼 전략 광장의 전략 패러다임과 API 문서에서 매우 일반적이며 매우 간단합니다.

        // 获取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)^ 브린 지표에는 세 개의 줄이 있으므로 TA.BOLL 함수가 반환하는 데이터는 2차원 대수군이다. ^boll[0],boll[1],boll[2]는boll 대수군의 세 개의 요소이며 각각 줄, 즉 대수군을 나타냅니다. ^boll[0],boll[1],boll[2]는 Boll 대수군의 세 개의 요소입니다.

  • boll[0]: 브린 밴드 온라인
  • boll[1]: 브린 벨트 중선
  • boll[2]: 브린 벨트 아래 라인

다음으로 K선 데이터의 볼륨, 즉 거래량, 그리고 계산된 브린 지표 데이터를 그래프에 그려내는 방법을 살펴보겠습니다.

우리는 K선 데이터의 바를 하나씩 그려서 전체 K선 배열, 즉 코드 내의 바 배열을 가로질러 가야 합니다.forEach방법 순환, 또는 for 루킹 문자를 사용하여 순환.

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

참고로, 바에 있는 그래프를 그리는 작업을 시작할 때마다 먼저c.begin(bar)이 문서는 다른 문장과 연결됩니다.begin함수는 우리의 그래프 객체 c의 방법이다. 그래프 작업이 끝나면 호출이 필요합니다.c.close()begin함수와close함수들 사이에 있는 것은 우리가 Pine 언어의 그림과 비슷한 방식으로 호출하는 그림 함수들입니다.barcolor bgcolor plot fill hline plotarrow plotshape plotchar plotcandle signal, 줄, 화살표, 표시 정보 등을 그려볼 수 있다. 이 함수들의 매개 변수는 파인 언어의 대응 함수 매개 변수와 일치하며, 그림의 기능도 일치한다.

거래 신호 화살표, 표지판, 수평선 등의 그래프를 추가합니다.

위의 브린 지표의 도형 예제에서 거래 신호 화살표, 표기, 수평선을 추가합니다.

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

파인 언어의 전략 하단 동작은 그래프에 신호를 자동으로 표시하기 때문에KLineChart함수에서 생성된 그래프 객체는 또한 구매 판매 신호 표시를 그리는 함수를 확장합니다:c.signal

그래프 구성 객체

그래프 스타일을 구성하는 구조를 선언할 수 있습니다. 예를 들어, 아래의 chartCfg 변수는 격자선의 구성 정보를 나타냅니다.

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

그래프 구성 개체는 그래프의 일부 속성, 외관 등의 데이터 구조를 설정하는 것입니다. 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어, 예를 들어

물론, 만약 여러분이 이 모든 것을 잘 모르는 사람이라면,KLineChart함수가 그래프 객체를 만들 때 그래프 구성 객체를 전달할 수 없습니다. 그러면 생성된 그래프는 기본 스타일입니다. FMZ 플랫폼의 API 함수를 사용합니다.KLineChart그래프 객체를 만드는 함수:

var c = KLineChart(chartCfg)

그레이드 라인의 테스트 코드를 그려보세요:

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

그래프 구성 스타일 예제

그래프 구성 스타일의 설정을 참조하여 사용할 수 있습니다.

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

이 모든 것이 전략적 그림 디자인을 더 쉽게 만들 수 있을까요?


관련

더 많은