একটি কৌশল ডিজাইন করার সময়, প্রদর্শনের জন্য একটি কৌশল চার্ট ডিজাইন করা প্রায়শই প্রয়োজনীয় হয়, জাভাস্ক্রিপ্ট ভাষা, পাইথন ভাষায় কৌশল লেখার সময়, প্রোগ্রামিং বা এফএমজেড প্ল্যাটফর্মে ব্যবহৃত চার্টিং লাইব্রেরির সাথে অপরিচিত ব্যবহারকারীরা প্রায়শই কাস্টম চার্টে অঙ্কনের জন্য কোড ডিজাইনের সাথে লড়াই করে। সুতরাং আপনি কীভাবে কেবলমাত্র অল্প পরিমাণে কোড দিয়ে সমৃদ্ধ সামগ্রী সহ একটি কৌশল চার্ট আঁকতে পারেন?
এই সহজ এবং শক্তিশালী উপায় অঙ্কন পাইন ভাষায় দেখা যায়, যা তার সমৃদ্ধ অঙ্কন ফাংশন জন্য পরিচিত হয়। যদি পাইন ভাষা অঙ্কন ইন্টারফেস জাভাস্ক্রিপ্ট এবং পাইথন ভাষার কৌশলগুলির সাথে সংযুক্ত করা যেতে পারে, এটি বিকাশকারীদের নকশা কৌশল অঙ্কন ফাংশনকে ব্যাপকভাবে সহজতর করবে। অতএব, এই চাহিদার ভিত্তিতে, এফএমজেড প্ল্যাটফর্ম কাস্টম অঙ্কন ফাংশন আপগ্রেড করেছে এবং ব্যবহারের উপায় প্রসারিত করেছে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, "Close")
c.close()
}
Sleep(1000)
}
}
এই উদাহরণটি খুব সহজ, শুধু কৌশল কাস্টম অঙ্কন এলাকায় একটি কে-লাইন চার্ট আঁকা, এবং চার্টের উপ-চার্ট অবস্থানে প্রতিটি কে-লাইন BAR এর সাথে সামঞ্জস্যপূর্ণ একটি ভলিউম বক্ররেখা আঁকা।
কোডে, আমরা ব্যবহার করিvar c = KLineChart()
একটি চার্ট অবজেক্ট তৈরি করার জন্য প্রথমে, এবং তারপর একটি চার্ট আঁকতে তার পদ্ধতি ব্যবহার করুন। তারপর লুপে, আমরা কে-লাইন ডেটা (অ্যারে কাঠামো) পাই, এবং কে-লাইন অ্যারেটি অতিক্রম করি। এটি উদাহরণে যেমন একটি সহজ জন্য লুপ ব্যবহার করে অতিক্রম করা যেতে পারে, অথবা এটি অন্যান্য উপায়ে অতিক্রম করা যেতে পারে।
অঙ্কন অপারেশনc.begin(bar)
ফাংশন এবং শেষc.close()
ফাংশন।begin
এবংclose
ফাংশন চার্ট বস্তুর সব পদ্ধতি হয় c. পরবর্তী, সবচেয়ে সাধারণভাবে ব্যবহৃত অঙ্কন ফাংশন ব্যবহার করুনplot
প্রতিটি BAR এর উপর ভলিউম কার্ভ আঁকা।
ধরুন আমরা একটি চার্ট ডিজাইন করতে চাই যার সাথে বোলিংজার ইন্ডিকেটর সংযুক্ত আছে। এবং এটি প্রতিটি 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()
// main strategy loop
while(true) {
// polling interval
Sleep(500)
// get K-line data
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
continue
}
// calculate the Bollinger indicator
var boll = TA.BOLL(bars)
bars.forEach(function(bar, index) {
c.begin(bar)
// drawing operation
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // Draw on the main chart
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // Draw on the main chart
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // Draw on the main chart
c.plot(bar.Volume, "volume") // Draw on the sub-chart
c.close()
})
// Strategy trading logic
// ...
// ..
}
}
যেমন আমরা কোডে দেখতে পাচ্ছি, আমাদের ব্যাকটেস্ট কনফিগারেশন তথ্য 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"}]
*/
এই ধরনের একটি কনফিগারেশন হ'ল বাইনারেন্স স্পট এক্সচেঞ্জ অবজেক্ট ব্যাকটেস্টিং পরীক্ষা ব্যবহার করা। ব্যাকটেস্টিং প্রভাবটি নিম্নরূপ দেখানো হয়েছেঃ
আপনি দেখতে পাচ্ছেন যে আমরা পাইন এর অঙ্কন পদ্ধতি ব্যবহার করছি, যা জাভাস্ক্রিপ্ট ভাষায় অঙ্কন কোডকে ব্যাপকভাবে সহজ করে।
প্ল্যাটফর্ম স্ট্র্যাটেজি স্কয়ারের কৌশল উদাহরণ এবং এপিআই ডকুমেন্টেশনে কে-লাইন ডেটা এবং গণনা সূচকগুলি প্রাপ্ত করার ক্রিয়াকলাপগুলি সাধারণ এবং সহজ।
// obtain K-line data
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
// If the acquisition of the K line fails, that is, if !bar is true, execute continue, ignore the following code, and re-execute the loop
// If bars.length is less than or equal to 20, that is, the number of K-line BAR (bar) is less than 20, the indicator cannot be calculated, and continue is also executed
continue
}
// Calculate the Bollinger indicator
var boll = TA.BOLL(bars)
Bollinger সূচক গণনা ফাংশন TA.BOLL, যদি Bollinger সূচক পরামিতি নির্দিষ্ট করা হয় না, ডিফল্ট পরামিতিBOLL(20, 2)
বোলিংজার সূচকটিতে তিনটি লাইন রয়েছে, তাই TA.BOLL ফাংশন দ্বারা প্রদত্ত ডেটা একটি দ্বি-মাত্রিক অ্যারে। বোল[০], বোল[1], এবং বোল[2] হল বোল অ্যারের তিনটি উপাদান, যার প্রতিটি একটি লাইন উপস্থাপন করে এবং একটি অ্যারে।
তারপর আমরা দেখব কিভাবে K-লাইন ডেটার ভলিউম, অর্থাৎ ভলিউম, এবং গণনা করা Bollinger সূচক ডেটা চার্টে আঁকতে হয়।
আমরা K-লাইন ডেটা বার দ্বারা বার আঁকা, তাই আমরা সমগ্র K-লাইন অ্যারে অতিক্রম করতে হবে, অর্থাৎ, কোড মধ্যে বার অ্যারে অতিক্রম.forEach
পদ্ধতিটি এখানে ক্রস করতে ব্যবহৃত হয়, অথবা for লুপটি ক্রস করতে ব্যবহার করা যেতে পারে।
bars.forEach(function(bar, index) {
c.begin(bar)
// Drawing operations
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // {overlay: true} Parameter control, drawn on the main chart
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // Draw on the main chart
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // Draw on the main chart
c.plot(bar.Volume, "volume") // Draw on the sub-chart
c.close()
})
এটা লক্ষ করা উচিত যে যখনই আপনি একটি বারে একটি চার্ট অঙ্কন অপারেশন শুরু, আপনি একটিc.begin(bar)
ফাংশন কল প্রথম.begin
ফাংশন আমাদের চার্ট বস্তু সি পদ্ধতির একটি। অঙ্কন অপারেশন শেষে,c.close()
ডাকা প্রয়োজন.begin
ফাংশন এবংclose
ফাংশন হল অঙ্কন ফাংশন যা আমরা পাইন ভাষার অঙ্কন পদ্ধতির অনুরূপ বলি। এটি সমর্থন করেঃ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({overlay : true})
// Strategy main loop
while(true) {
// Polling interval
Sleep(500)
// Obtain K-line data
let bars = exchange.GetRecords()
if (!bars || bars.length <= 20) {
continue
}
// Calculate Bollinger indicator
var boll = TA.BOLL(bars)
bars.forEach(function(bar, index) {
c.begin(bar)
// Drawing operations
c.plot(boll[0][index], "Boll_Up", {overlay: true}) // Draw on the main chart
c.plot(boll[1][index], "Boll_Mid", {overlay: true}) // Draw on the main chart
c.plot(boll[2][index], "Boll_Down", {overlay: true}) // Draw on the main chart
c.plot(bar.Volume, "volume", {overlay: false}) // Draw on the sub-chart
c.hline(bar.Open, {overlay: true}) // Horizontal line
c.plotarrow(bar.Close - bar.Open, {overlay: true}) // Arrow
c.plotshape(bar.Close - bar.Open > 0, {style: 'square'}) // Draw square markers
c.plotchar(bar.Close - bar.Open < 0, {char: 'X'}) // Draw the character X
c.close()
})
// Strategy trading logic
// ...
// ..
}
}
চার্ট স্টাইল কনফিগার করার জন্য একটি কাঠামো ঘোষণা করা যেতে পারে। উদাহরণস্বরূপ, নিম্নলিখিত চার্টCfg পরিবর্তনশীল একটি গ্রিড লাইনের কনফিগারেশন তথ্য উপস্থাপন করে।
var chartCfg = {
grid: {
show: true,
// Grid horizontal line
horizontal: {
show: true,
size: 2,
color: '#FF0000', // Color of horizontal grid line
// 'solid'|'dash'
style: 'dash', // Type of line
dashValue: [2, 2]
},
// Grid vertical line
vertical: {
show: true,
size: 2,
color: '#32CD32',
// 'solid'|'dash'
style: 'solid',
dashValue: [2, 2]
}
},
}
চার্ট কনফিগারেশন অবজেক্ট হ'ল ডেটা কাঠামো যা চার্টের কিছু বৈশিষ্ট্য এবং উপস্থিতি সেট করে। উদাহরণস্বরূপ, উদাহরণে একটি গ্রিড লাইন স্টাইল কনফিগারেশন ব্যবহার করা হয়। এমন অনেকগুলি বিকল্প রয়েছে যা কনফিগার এবং সংশোধন করা যেতে পারে, যেমন এক্স-অক্ষ, ওয়াই-অক্ষ সম্পর্কিত সেটিংস, কার্সার লাইন সেটিংস, সতর্কতা বার্তা সেটিংস, প্রযুক্তিগত সূচক শৈলী সেটিংস, কে-লাইন বার শৈলী সেটিংস ইত্যাদি।
অবশ্যই, যদি আপনি এই সঙ্গে পরিচিত না হন, আপনি চার্ট কনফিগারেশন বস্তু পাস করতে পারবেন না যখন কলKLineChart
একটি চার্ট বস্তু তৈরি করতে ফাংশন. তারপর তৈরি চার্ট ডিফল্ট শৈলী. API ফাংশন ব্যবহার করুনKLineChart
একটি চার্ট অবজেক্ট তৈরি করতে FMZ প্ল্যাটফর্মের ফাংশনঃ
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,
// Grid horizontal line
horizontal: {
show: true,
size: 2,
color: '#FF0000',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
},
// Grid vertical line
vertical: {
show: true,
size: 2,
color: '#32CD32',
// 'solid'|'dash'
style: 'solid',
dashValue: [2, 2]
}
},
}
var c = KLineChart(chartCfg)
// Strategy main loop
while(true) {
// Polling interval
Sleep(500)
// Obtain K-line data
var bars = _C(exchange.GetRecords)
bars.forEach(function(bar, index) {
c.begin(bar)
c.close()
})
// Strategy trading logic
// ...
// ..
}
}
এটি চার্ট কনফিগারেশন স্টাইল সেটিংস উল্লেখ করতে ব্যবহার করা যেতে পারে।
{
// Gridlines
grid: {
show: true,
// Grid horizontal line
horizontal: {
show: true,
size: 1,
color: '#393939',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
},
// Grid vertical line
vertical: {
show: false,
size: 1,
color: '#393939',
// 'solid'|'dash'
style: 'dash',
dashValue: [2, 2]
}
},
// Candlestick chart
candle: {
// The distance between the top and bottom of the candlestick chart, greater than 1 is the absolute value, greater than 0, and 1 is the proportion
margin: {
top: 0.2,
bottom: 0.1
},
// Type of Candlestick Charts 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
type: 'candle_solid',
// Candle pillar
bar: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888'
},
// Area map
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,
// Highest price marker
high: {
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal'
},
// Lowest price marker
low: {
show: true,
color: '#D9D9D9',
textMargin: 5,
textSize: 10,
textFamily: 'Helvetica Neue',
textWeight: 'normal',
},
// Latest price marker
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
}
}
},
// Tips
tooltip: {
// 'always' | 'follow_cross' | 'none'
showRule: 'always',
// 'standard' | 'rect'
showType: 'standard',
labels: ['time', 'open', 'close', 'high', 'low', 'volume'],
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
}
}
},
// Technical indicators
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'
},
// Latest value marker
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
}
},
// Tips
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-axis
xAxis: {
show: true,
height: null,
// x-axis line
axisLine: {
show: true,
color: '#888888',
size: 1
},
// x-axis split text
tickText: {
show: true,
color: '#D9D9D9',
family: 'Helvetica Neue',
weight: 'normal',
size: 12,
paddingTop: 3,
paddingBottom: 6
},
// x-axis split line
tickLine: {
show: true,
size: 1,
length: 3,
color: '#888888'
}
},
// y-axis
yAxis: {
show: true,
width: null,
// 'left' | 'right'
position: 'right',
// 'normal' | 'percentage' | 'log'
type: 'normal',
inside: false,
reverse: false,
// y-axis line
axisLine: {
show: true,
color: '#888888',
size: 1
},
// y-axis split text
tickText: {
show: true,
color: '#D9D9D9',
family: 'Helvetica Neue',
weight: 'normal',
size: 12,
paddingLeft: 3,
paddingRight: 6
},
// y-axis split line
tickLine: {
show: true,
size: 1,
length: 3,
color: '#888888'
}
},
// Split line between charts
separator: {
size: 1,
color: '#888888',
fill: true,
activeBackgroundColor: 'rgba(230, 230, 230, .15)'
},
// Crosshair
crosshair: {
show: true,
// Horizontal line and text of crosshair
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 line and text of crosshair
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'
}
}
},
// Graph
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'
}
}
}
এটি কি কৌশল নকশা নকশা সহজ করে তোলে না?