代码之家 › 专栏 › 技术社区 › solarissf

extjs6图表,动态创建多行

charts extjs

solarissf · 技术社区 · 6 年前

我不知道如何将这些动态添加到我的图表中。非常感谢您的帮助!我能把PL放在YxAX上,并在xAXIS上文件,但是它在1行,没有被仪器分开。

这是我的数据商店。

    store1.add({
        Filedate: '2018-08-10',
        Instrument: 'crudeOil',
        CumulativePl: 999
    });

    store1.add({
        Filedate: '2018-08-11',
        Instrument: 'crudeOil',
        CumulativePl: 1200
    });

    store1.add({
        Filedate: '2018-08-10',
        Instrument: 'gold',
        CumulativePl: 500
    });

    store1.add({
        Filedate: '2018-08-11',
        Instrument: 'gold',
        CumulativePl: 700
    });

更新。。。基于响应,我需要为要绘制的每个行序列创建一个存储区。因此,现在我正在按乐器对存储进行分组,我需要为存储中的每个乐器创建一个新的存储,我对如何操作感到困惑。 //组存储,对于每个组

    myStore.group('instrument');
    myStore.getGroups().each(function (group, i) {

        debugger;
        //create store here

        group.each(function (record) {
            //foreach item in group, populate store
            debugger;
        });

        //create series of data from newly created store
        //add series to chart
    });

enter code here

1 回复 | 直到 6 年前

Fabio Barros 6 年前

只需为每个系列创建两个独立的存储,如下所示:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var me = this;

        var storeOil = Ext.create('Ext.data.Store', {
            fields: [{
                name: 'Filedate',
                type: 'date',
                dateFormat: 'Y-m-d'
            }, {
                name: 'Instrument',
                type: 'string'
            },
            {
                name: 'CumulativePl',
                type: 'float'
            }],
            data: [{
                "Filedate": '2018-08-10',
                "Instrument": 'crudeOil',
                "CumulativePl": 999
            }, {
                "Filedate": '2018-08-11',
                "Instrument": 'crudeOil',
                "CumulativePl": 1200
            }]
        });

        var storeGold = Ext.create('Ext.data.Store', {
            fields: [{
                name: 'Filedate',
                type: 'date',
                dateFormat: 'Y-m-d'
            }, {
                name: 'Instrument',
                type: 'string'
            },
            {
                name: 'CumulativePl',
                type: 'float'
            }],
            data: [{
                "Filedate": '2018-08-10',
                "Instrument": 'gold',
                "CumulativePl": 500
            }, {
                "Filedate": '2018-08-11',
                "Instrument": 'gold',
                "CumulativePl": 700
            }]
        });



        Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: '100%',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'cartesian',
                width: '100%',
                height: 500,

                insetPadding: 40,
                innerPadding: {
                    left: 40,
                    right: 40
                },
                axes: [{
                    type: 'numeric',
                    fields: 'CumulativePl',
                    position: 'left',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'time',
                    fields: 'Filedate',
                    position: 'bottom',
                    grid: true,
                    label: {
                        rotate: {
                            degrees: -40
                        }
                    }
                }],
                series: [{
                    type: 'line',
                    store: storeGold,
                    xField: 'Filedate',
                    yField: 'CumulativePl'

                },{
                    type: 'line',
                    store: storeOil,
                    xField: 'Filedate',
                    yField: 'CumulativePl'


                }]
            }]
        });
    }
});