extjs6图表，动态创建多条线

Question

我在使用ExtJs6折线图时遇到了一些非常简单的问题。我试着画两个用仪器分开的级数。如果你看我下面的数据，应该有2行，1行代表crudeOil，1行代表黄金。我想让日期在图表的底部，CumulativePl沿着左边的Y轴。

我不知道如何将这些动态添加到我的图表中。任何帮助都是非常感谢的！我可以把pl放在yaxis上，把filedate放在xaxis上，但它在一行中，没有被工具分隔。

这是我的数据存储。

    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

Answer 1

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

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'


                }]
            }]
        });
    }
});