রিসোর্স লোড হচ্ছে... লোডিং...

KlineChart ফাংশন ব্যবহার করে কৌশল চার্ট ডিজাইন করা সহজ

লেখক:উদ্ভাবকগণ - ক্যোটিফিকেশন - ছোট্ট স্বপ্ন, তৈরিঃ ২০২২-০৭-০১ 15:54:06, আপডেটঃ ২০২৩-০৯-১৮ 20:11:05

img

KlineChart ফাংশন ব্যবহার করে কৌশল চার্ট ডিজাইন করা সহজ

নকশা নীতিগুলি প্রায়শই নকশা নীতি চার্টগুলি দেখায় যে জাভাস্ক্রিপ্ট ভাষা, পাইথন ভাষা ব্যবহার করে নীতিগুলি লেখার সময়। প্রোগ্রামিংয়ের সাথে পরিচিত নয় এমন ব্যবহারকারীরা বা এফএমজেড প্ল্যাটফর্মের সাথে পরিচিত নয় এমন ব্যবহারকারীরা প্রায়শই কাস্টম চার্টে চিত্রিত কোড ডিজাইন করতে অসুবিধা হয়। তবে কীভাবে কম কোড লেখার সাথে সমৃদ্ধ নীতি চার্ট আঁকতে পারে?

পাইন ভাষায় এই সহজ এবং শক্তিশালী চিত্রের বৈশিষ্ট্য রয়েছে। পাইন ভাষার চিত্রের ইন্টারফেসটি জাভাস্ক্রিপ্ট, পাইথন ভাষার কৌশলগুলিতে ব্যবহার করা যেতে পারে তবে এটি বিকাশকারীদের নকশা কৌশলগুলির জন্য চিত্রের বৈশিষ্ট্যগুলিকে ব্যাপকভাবে সহজ করে তোলে। সুতরাং এফএমজেড প্ল্যাটফর্মটি এই চাহিদার উপর ভিত্তি করে কাস্টম চিত্রের বৈশিষ্ট্যগুলি আপগ্রেড করে এবং ব্যবহারের প্রসারিত করে।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-এর উপর একটি ট্র্যাফিক কার্ভ আঁকুন।

একটু জটিল উদাহরণ

যদি আমরা ব্রাইন সূচক সহ একটি চার্ট ডিজাইন করতে চাই। হ্যাঁ! এবং প্রতিটি 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"}]
*/

এই কনফিগারেশনটি হ'ল বিন্যান্স এক্সচেঞ্জের অবজেক্ট রিট্রেস টেস্ট ব্যবহার করা, যার ফলাফলগুলি নিম্নরূপঃ

img

আপনি দেখতে পাচ্ছেন, আমরা পাইনের অঙ্কন পদ্ধতি ব্যবহার করেছি, যা জাভাস্ক্রিপ্ট ভাষায় অঙ্কন কোডকে ব্যাপকভাবে সরলীকৃত করেছে।

সূচক ইত্যাদিতে ডেটা গ্রাফ লিখুন

কে-লাইন ডেটা সংগ্রহ এবং পরিমাপ গণনা করা। এই অপারেশনগুলি প্ল্যাটফর্ম কৌশল স্কয়ারের কৌশল দৃষ্টান্ত এবং এপিআই ডকুমেন্টেশনে খুব সাধারণ এবং খুব সহজ।

        // 获取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 ফাংশনটি একটি দ্বি-মাত্রিক অ্যারে প্রদান করে। │boll[0],boll[1],boll[2] হ'ল বল অ্যারের তিনটি উপাদান, যা প্রতিটি একটি লাইন, একটি অ্যারে প্রতিনিধিত্ব করে।

  • boll[0]: ব্রিন ব্যান্ড অনলাইনে
  • বোল[১]: বোল ব্যান্ডের মধ্যরেখা
  • বোল[২]: বোলিং ব্যান্ড ডাউনলাইন

তারপর দেখা যাক কিভাবে K-রেখা তথ্যের ভলিউম, অর্থাৎ লেনদেনের পরিমাণ, এবং গণনা করা ব্রেনিং ইন্ডিকেটর ডেটাকে চার্টে চিত্রিত করা যায়।

আমরা K-line data এর Bar-by-Bar গ্রাফিং করছি, তাই পুরো K-line অ্যারে জুড়ে যেতে হবে, অর্থাৎ কোড জুড়ে bars অ্যারে জুড়ে যেতে হবে।forEachপদ্ধতির মাধ্যমে যেতে পারে, অথবা for loop এর মাধ্যমে যেতে পারে।

        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ফাংশনগুলির মধ্যে আমরা পাইন ভাষার মতোই একটি অঙ্কন ফাংশন কল করি।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

চার্ট কনফিগারেশন বস্তু

একটি কাঠামো চার্ট শৈলী কনফিগার করার জন্য ঘোষণা করা যেতে পারে, যেমন নিম্নলিখিত চার্টCfg ভেরিয়েবল একটি গ্রিড লাইন কনফিগারেশন তথ্য নির্দেশ করে।

    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'
        }
    }
}

এটি কি কৌশলগত গ্রাফিক ডিজাইনকে আরও সহজ করে তুলবে?


সম্পর্কিত

আরো