EXT根据数据绘制chart柱状图和饼图，动态改变坐标轴

首先说明引用背景：需要通过柱状图或者饼图来比较多个公司在营业额、研发投入、产量、等方面的数据，由于比较的方面较多，不能够一次在图表中全部显示，如下图：

若需要比较的数据只有3到5个则可以如下实现，但是当比较项有十几个甚至上百的话就不能这样实现了；

思路：通过一个combobox来实现动态切换比较类目，即该表chart的axes以及series

实现如下：

fields是所有字段名称

fields =[{"name":"COMPANY_NAME"},{"name":"C1"},{"name":"C2"},{"name":"C3"},{},{}.....]

data是原始数据

data = [{"COMPANY_NAME":"A公司","C1":"13895","C2":"13455","C2":"155"...},<pre name="code" class="javascript">{"COMPANY_NAME":"A公司","C1":"11125","C2":"13455","C2":"195"....},

{"COMPANY_NAME":"A公司","C1":"13345","C2":"14445","C2":"85"...},....]

header 是 combobox的键值对，作为其store的data

header = [{"text":"公司","dataIndex":"COMPANY_NAME"},{"text":"营业额","dataIndex":"F000201001"},{"text":"市场占有","dataIndex":"C1"},{"text":"研发投入","dataIndex":"C2"}，{},{}.....]

Ext.define('chartChangeByCombo', {
    extend: 'Ext.panel.Panel',
    constructor: function () {
        var combo = Ext.create('Ext.form.ComboBox', {
            fieldLabel: '对比项',
            labelWidth: 50,
            width: 260,
            store: Ext.create('Ext.data.Store', {
                fields: ['text', 'dataIndex'],
                data:header,
               // filters: [   //将指定字段禁止显示
               //         function (item) {
               //             var id = item.data.dataIndex;
               //             if (id == '指定字段')
               //                 return false;
               //             else
               //                 return true;
               //         }
               // ]
            }).load(),
            listeners: {
                'change': function (obj) {
                    this.findParentByType('panel').items.items[1].axes.items[0].fields[0] = obj.getValue();
                    this.findParentByType('panel').items.items[1].axes.items[0].setTitle(obj.getRawValue());
                    this.findParentByType('panel').items.items[1].axes.items[0].drawAxis();
                    this.findParentByType('panel').items.items[1].series.items[0].yField = obj.getValue();
                    this.findParentByType('panel').items.items[1].redraw();
                }
            },
            queryMode: 'local',
            displayField: 'text',
            valueField: 'dataIndex',
        });
        
        var chart = Ext.create('Ext.chart.Chart', {
            width: 270,
            autoScroll: true,
            height: 600,
            animate: true,
            store: Ext.create('Ext.data.JsonStore', {
                fields:fields,
                data: data
            }),
            legend: {
                position: 'top'   //图例
            },
            axes: [
                {
                    type: 'Numeric',
                    position: 'bottom',
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    //title: '营业额',         
                    grid: true,
                    minimum: 0,
                    label: {
                        rotate: {
                            degrees: 315
                        }
                    }
                },
                {
                    type: 'Category',
                    position: 'left',
                    fields: ['COMPANY_NAME']
                }
            ],
            series: [
                {
                    type: 'bar',
                    axis: 'bottom',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 200,
                        height: 30,
                        renderer: function (storeItem, item) {
                            this.setTitle(item.value[0] + ': ' + storeItem.get(item.yField));
                        }
                    },
                    xField: 'COMPANY_NAME'               
                }
            ]
        }
        );
        Ext.apply(this, {      
            height: 520,
            width: '100%',
            title:'柱状图',
            autoScroll: true,
            items: [
                combo,
                chart
            ]
        });
        this.callParent(arguments);       
    }
});