extjs - Extjs 折线图

Question

我想根据折线图的日期以不同的颜色可视化不同的公司数据。问题是公司的数量会发生变化。

假设输入数据会像

data: [{ date: '2018-12-20', company1: 10, company2: 5, },{ date: '2018-12-21', company1: 10, company2: 10 }]

为了可视化它，模型将像

    Ext.define('ABC.model.Job', {
extend: 'Ext.data.Model',

fields: [

    {name: 'DATE', type: 'auto'}
    {name: '1', type: 'int'}
    {name: '2', type: 'int'}

],

proxy: {
    type: 'ajax',
    noCache: false,

    actionMethods: {'read': 'POST'},

    api: {
        read: utils.createUrl('api', 'read'),

    },

    reader: {
        type: 'json',
        root: 'data'
    },

    listeners: {
        exception: function(proxy, response, operation) {
            App.showHttpError('Job ', response);
        }
    }
}

});

轴的视图部分将是

Ext.define('ABC.view.Job', { 扩展: 'Ext.container.Container',

requires: [
    'ABC.store.Job',        
],

border: false,
layout: {type:'vbox', pack:'start', align:'stretch'},

initComponent: function() {
    var me = this;



    me.jobStore2 = Ext.create('ABC.store.Job');




    Ext.apply(me, {
        items: [
            {
            xtype: 'chart',
            store: me.jobStore2,
            style: 'background: #fff',
            insetPadding: 40,
            animate: true,
            shadow: false,
            flex: 2,
            minHeight: 400,
            legend: {
                position: 'top',
                boxStrokeWidth: 0,
                labelFont: '12px Helvetica'
            },

            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['1'],
                grid: true,
                minimum: 0, 


            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['DATE'],
                grid: true,
            }],


            series: [{
            type: 'line',
            axis: 'left',
            title: '1',
            xField: 'DATE',
            yField: '1',
            style: {
                'stroke-width': 4
            },

        },
                    {
                type: 'line',
                axis: 'left',
                xField: 'DATE',
                border: false,
                flex:1,
                title: ['2'],
                yField: ['2'],

                  style: {
                'stroke-width': 4
            },

            }

                ]

    }
    });

    me.callParent(arguments);
}

});

如果数据包含很多公司怎么办。如何更改系列？而不是一次又一次地给出y轴的细节

Answer 1

为了便于维护，您只需创建一个包含公司名称的数组，并将其映射到字段和轴：

var companies = ['company1', 'company2', ...];

Ext.create('Ext.data.Store', {
    fields: [{
        name: 'DATE', 
        type: 'auto'
    }].concat(
        companies.map(function(companyName) {
            return {
                name: companyName,
                type: 'int'
            };
        })
    )
});

    ...
    series: companies.map(function(companyName) {
        return {
            type: 'line',
            axis: 'left',
            title: '1',
            xField: 'DATE',
            yField: companyName,
            style: {
                'stroke-width': 4
            },
        }
    });
    ...