クリップチャート機能を使って,戦略図のデザインを簡素化します.
作者: リン・ハーン発明者 量化 - 微かな夢, 作成日:2022-07-01 15:54:06, 更新日:2023-09-18 20:11:05
クリップチャート機能を使って,戦略図のデザインを簡素化します.
策略グラフの設計は,JavaScript言語やPython言語で策略グラフを作成するときにしばしば必要である. プログラミングに慣れていない,またはFMZプラットフォームを使用するグラフライブラリに慣れていないユーザーは,通常,カスタムグラフにグラフを描くコードの設計に悩む.
このシンプルで機能的な図解のやり方は,豊かな図解機能で有名なPine言語で見られる.Pine言語の図解インターフェイスがJavaScriptやPython言語の戦略にアクセスできれば,開発者が図解機能の設計戦略を非常に便利にすることができます.したがってFMZプラットフォームは,この需要に基づいて,カスタム図解機能をアップグレードし,使用範囲を拡大しました.KLineChart機能がカスタマイズされたグラフを描く方法.APIのドキュメントを参照してください:https://www.fmz.com/api#klinechart
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)
}
}
この例は非常にシンプルで,策略のカスタムグラフ領域にK線を描き,グラフの副図位置にそれぞれのK線BARに対応する成交曲線を描くだけです.
プログラミングの第一歩はvar c = KLineChart()グラフのオブジェクトを作成し,その方法を呼び出すためにグラフを作成します. その後,ループでは,K線データ (Array Structure) を取得し,K線配列を横断操作します.
グラフの操作はc.begin(bar)この関数は,c.close()函数終了しました.begin、close関数は,グラフオブジェクト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のプラットフォーム上で,FMSの設定情報を以下のように表示しています.
/*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 現場取引所のオブジェクト回検テストを使用して,回検効果は以下のとおりです.
パインの図解方法を使って,JavaScriptで図解コードを非常に簡素化しました.
データグラフや指標を書き込む
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)・ブリン指標には3つの行があるので,TA.BOLL関数で返されるデータは二次元の行である. ・boll[0],boll[1],boll[2]は,bollの3つの要素で,それぞれが1つの行,すなわち行を表す行である.
- Boll[0]: ブリン・バンド オンライン
- boll[1]: ブリン帯の中間線
- boll[2]: ブリン帯下線
計算したブリング指標データとK線データのボリュームをグラフに描く方法を見てみましょう.
K線データをBarごとに図を描くので,コード内のbarsの行列をすべて横断します.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()
})
Bar のグラフを描くとき,最初に行わなければならないのは,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()
})
// 策略交易逻辑
// ...
// ..
}
}
パイン言語では,シグナルが自動的にグラフに表示されるので,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]
}
},
}
グラフの配置オブジェクトは,グラフの属性や外観などのデータ構造を設定するものです.例では,格子様式の設定を使用します. X軸やY軸の関連設定,光線の設定,提示情報の設定,技術指標のスタイル設定,K線BARのスタイル設定など,多くの設定変更オプションがあります.
呼び出しで電話をかけてください.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()
})
// 策略交易逻辑
// ...
// ..
}
}
グラフ配置のスタイル例
グラフの配置スタイルの設定を参照するために使用できます.
{
// 网格线
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'
}
}
}
戦略図のデザインはもっと簡単になるのか?
関連性
- 暗号通貨におけるリード・ラグ・アービトラージへの導入 (2)
- デジタル通貨におけるリード-ラグ套路の紹介 (2)
- FMZプラットフォームの外部信号受信に関する議論: 戦略におけるHttpサービス内蔵の信号受信のための完全なソリューション
- FMZプラットフォームの外部信号受信に関する探求:戦略内蔵Httpサービス信号受信の完全な方案
- 暗号通貨におけるリード・ラグ・アービトラージへの導入 (1)
- デジタル通貨におけるリード-ラグ套路の紹介 (1)
- FMZプラットフォームの外部信号受信に関する議論:拡張API VS戦略内蔵HTTPサービス
- FMZプラットフォームの外部信号受信に関する探究:拡張API vs 戦略内蔵HTTPサービス
- ランダム・ティッカー・ジェネレーターに基づく戦略テスト方法に関する議論
- ランダム市場生成器に基づく戦略テスト方法について
- FMZ Quant の新しい機能: _Serve 機能を使用して HTTP サービスを簡単に作成する
もっと
- 初心者向け暗号通貨量的な取引 - 暗号通貨量的な取引に近づく (5)
- 初心者向け暗号通貨量的な取引 - 暗号通貨量的な取引に近づく (4)
- 初心者のための暗号通貨量的な取引 - 暗号通貨量的な取引にあなたを近づける (3)
- 初心者のための暗号通貨量的な取引 - 暗号通貨量的な取引にあなたを近づける (2)
- 初心者向け暗号通貨量的な取引 - 暗号通貨量的な取引に近づく (1)
- 仮想通貨のスポットヘッジ戦略の設計 (2)
- FMZにおける一般プロトコル契約のアクセス例
- 多取引所・スポット・スプレッド・アービトラージ・戦略 論理共有
- トレーディング戦略を構築するための可視化モジュール - 深入
- KLineChart 関数を使って戦略図面設計を簡単にする
- 複数の取引所の現金差率戦略 論理共有
- JavaScript 戦略バックテストは,Chrome ブラウザの DevTools でデバッグされています.
- JavaScript ポリシーの復習は,Chrome ブラウザで DevTools でデュッグされます.
- ビジネス戦略を構築する ビジュアル化モジュール -- 詳細
- 熊市に適した持続可能なバランス戦略
- 簡単に学習できるPine言語で 戦略を書いていないなら...
- 均衡とグリッド戦略の詳細な説明
- シンプルで効果的な戦略を デザインする方法です
- デジタル通貨の現貨で新しい略奪戦略 (教材)
- 複数のチャート の 図書 室 を 設計 する
シャンク共有ありがとうございました! この時点でKLineChartを利用して実現できるかわからないシナリオをお願いします. 戦略は多種多様な取引です. 2. 戦略をロードするときに,K線,指標,取引信号などを含む,デフォルトで指定された品種のグラフを描画する. 3, フィルタをクリックして,他の取引種を選択し,現在の時間に対応するK線までの歴史のK線グラフを取得します. 目的は,各取引品種が合理的に平衡されているか,取引が正常であるかをグラフで直接観察することです.
シャンク分かりました!
発明者 量化 - 微かな夢> 1 戦略は多種取引です. 複数のグラフでは,KLineChart関数はサポートされていません. 図面インタフェースのChart関数は,複数の図面図面行のクラスの設計を参照できます. > 2, 戦略をロードするときに,K線,指標,取引信号などを含む,デフォルトで指定された品種のグラフを描画します. 単一のグラフは実現できます. > 3、フィルタをクリックして,他の取引品種を選択し,現在の時間に対応するK線までの歴史的なK線グラフを取得します. シングルグラフは,特定のコードで過去K線データをクエリし,グラフを埋めることができます. 多種策の場合,Chart関数で図を描くことをお勧めします.KLineChart関数は現在,単一の図を描くしかできません.