وسائل لوڈ ہو رہے ہیں... لوڈنگ...

لائن چارٹ فنکشن کا استعمال کرتے ہوئے حکمت عملی ڈرائنگ ڈیزائن کو آسان بناتا ہے

مصنف:ایجاد کاروں کی مقدار - خواب, تخلیق: 2022-07-01 15:54:06, تازہ کاری: 2023-09-18 20:11:05

img

لائن چارٹ فنکشن کا استعمال کرتے ہوئے حکمت عملی ڈرائنگ ڈیزائن کو آسان بناتا ہے

ڈیزائن پالیسیوں میں اکثر پالیسی چارٹ ڈیزائن کرنے کی ضرورت ہوتی ہے۔ یہ ظاہر ہوتا ہے کہ جب جاوا اسکرپٹ زبان ، پیتھون زبان میں حکمت عملی لکھنے کی ضرورت ہوتی ہے۔ پروگرامنگ سے ناواقف یا ایف ایم زیڈ پلیٹ فارم کے ذریعہ استعمال ہونے والے چارٹ لائبریری سے ناواقف صارفین کو اکثر اپنی مرضی کے مطابق چارٹ پر گراف کرنے کے لئے کوڈ ڈیزائن کرنے میں دشواری ہوتی ہے۔ تو پھر ، صرف تھوڑی سی کوڈ لکھنے کے ساتھ ، بھرپور مواد کے ساتھ حکمت عملی چارٹ کیسے تیار کیا جاسکتا ہے؟

یہ سادہ اور طاقتور پینٹنگ کا طریقہ پائین زبان میں دیکھا جاسکتا ہے ، جو گرافک کی بھرپور صلاحیتوں کے ساتھ مشہور ہے۔ اگر آپ پائین زبان کے گرافک انٹرفیس کو جاوا اسکرپٹ ، پائتھون زبان کی حکمت عملیوں تک رسائی حاصل کرسکتے ہیں تو ، ڈویلپرز کو گرافک کی حکمت عملیوں کو ڈیزائن کرنے میں بہت آسانی ہوگی۔ لہذا ایف ایم زیڈ پلیٹ فارم نے اس ضرورت پر مبنی اپنی مرضی کے مطابق گرافک کی صلاحیت کو اپ گریڈ کیا ، اور اس کا استعمال بڑھا دیا۔KLineChartفنکشن کس طرح اپنی مرضی کے مطابق گراف ڈرائنگ کرتا ہے۔ آپ API دستاویزات دیکھ سکتے ہیں۔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 کے ساتھ ٹرانزیکشن لائن کا چارٹ بھی شامل کریں تو ہم اس طرح بناسکتے ہیں:

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

آپ کو معلوم ہے کہ ایف ایم زیڈ پلیٹ فارم پر ہمارے پاس جو کوڈ موجود ہے اس میں اس کی ترتیب کی معلومات درج ذیل ہیں:

/*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 فنکشن کا ڈیٹا ایک دو جہتی صف ہے۔ │boll[0]،boll[1]،boll[2] یا بولل صف کے تین عناصر ہیں، جو ہر ایک لائن، ایک صف کی نمائندگی کرتے ہیں۔

  • boll[0]: بِلین بینڈ آن لائن
  • boll[1]: بلن بینڈ کی وسط لائن
  • boll[2]: بُلن بینڈ ڈاؤن لائن

اس کے بعد ہم دیکھیں گے کہ کس طرح K لائن کے اعداد و شمار کے حجم کو تبادلہ کرنے کے لئے، اور اعداد و شمار کے حساب سے برین اشارے کے اعداد و شمار کو چارٹ پر.

ہم K لائن کے اعداد و شمار کو بار بار ڈرائنگ کرتے ہیں، لہذا ہم پورے K لائن کے صفوں میں جائیں گے، یعنی کوڈ میں بارس کی صفوں میں جائیں گے۔ یہاں استعمال کیا جاتا ہے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]
            }
        },
    }

گراف کی تشکیل کا مقصد گراف کی کچھ خصوصیات ، ظاہری شکل وغیرہ کی ترتیب کرنا ہے۔ مثال کے طور پر ، ایک گرڈ لائن اسٹائل کی ترتیب استعمال کی جاتی ہے۔ بہت سارے اختیارات ہیں جن کی تشکیل کی جاسکتی ہے ، جیسے ایکس محور ، وائی محور کی متعلقہ ترتیبات ، روشنی کی لائن کی ترتیب ، اشارے کی ترتیبات ، تکنیکی اشارے کی طرز کی ترتیب ، K لائن BAR طرز کی ترتیب وغیرہ۔

اگر آپ ان سے واقف نہیں ہیں تو، آپ کو کال کر رہے ہیںKLineChartجب فنکشن چارٹ آبجیکٹ بناتا ہے تو چارٹ کی تشکیل کی اشیاء کو منتقل نہیں کیا جاسکتا ہے۔ اس کے بعد تخلیق کردہ چارٹ ڈیفالٹ اسٹائل ہے۔ ایف ایم زیڈ پلیٹ فارم کے 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'
        }
    }
}

کیا اس سے حکمت عملیوں کو ڈیزائن کرنا آسان ہو گیا ہے؟


متعلقہ

مزید