extjs - ExtJs -> 如何使用 2 个相关模型创建分组条形图（有很多关系）

Question

我正在尝试在 ExtJs 中绘制一个类似于 Sencha 示例的分组条形图。

您可以使用属于系列 xField / yField 中图表商店模型的子模型字段的字段吗？

如果“Golfer”模型有许多“GolfClubs”，是否可以呈现一个分组条形图，显示属于 Golfer 的每个 GolfClub 的条形图（每个高尔夫球手的名字将是一个轴标签）？

在 sencha 的示例中，商店在一条记录中包含所有数据，但我希望它可以自动绑定到“hasmany”关联模型？

//楷模

 Ext.define('GolfClub', {

extend : 'Ext.data.Model',

fields : [{
    name : 'ClubType',
    type : 'string'
}, {
    name : 'Weight',
    type : 'float'
}]

});

Ext.define('Golfer', {
    extend : 'Ext.data.Model',
    requires: ['GolfClub'],
    fields : [{
        name : 'GolferName',
        type : 'string'
    }],

    hasMany: {model: 'GolfClub', name: 'golfClubs'} 
});

//结束模型

//本地数据（只是为了让它首先工作）

function data(){

var golfers = [];
    var rory = Ext.create('Golfer', {
        GolferName : 'Rory'
    });

    var rorysDriver = Ext.create('GolfClub', {
        ClubType : 'Driver',
        Weight : 80
    });

var rorysPutter = Ext.create('GolfClub', {
        ClubType : 'Putter',
        Weight : 60
    });

var rorysSandWedge = Ext.create('GolfClub', {
        ClubType : 'SandWedge',
        Weight : 50
    });

    var rorysClubs = rory.golfClubs();

    rorysClubs.add(rorysDriver);
    rorysClubs.add(rorysPutter);
    rorysClubs.add(rorysSandWedge);

    golfers.push(rory);



    var tiger = Ext.create('Golfer', {
        GolferName : 'Tiger'
    });

    var tigersDriver = Ext.create('GolfClub', {
        ClubType : 'Driver',
        Weight : 85
    });

var tigersPutter = Ext.create('GolfClub', {
        ClubType : 'Putter',
        Weight : 55
    });

var tigersSandWedge = Ext.create('GolfClub', {
        ClubType : 'SandWedge',
        Weight : 58
    });

    var tigersClubs = tiger.golfClubs();

    tigersClubs.add(tigersDriver);
    tigersClubs.add(tigersPutter);
    tigersClubs.add(tigersSandWedge);

    golfers.push(tiger);

return golfers;
}

//结束本地数据

//本地存储

function store1(){
 var golferStore = Ext.create('Ext.data.Store', {
     model: 'Golfer',
     data : data()});

return  golferStore; 
}

//结束本地存储

Ext.onReady(function () {
       var chart = Ext.create('Ext.chart.Chart', {
        style: 'background:#fff',
        animate: true,
        shadow: true,
        store: store1(),
        legend: {
          position: 'right'  
        },
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['golfClubs.Weight']
        }, {
            type: 'Category',
            position: 'left',
            fields: ['GolferName'],
            title: 'Golfer'
        }],
        series: [{
            type: 'bar',
            axis: ['bottom'],
            xField: ['golfClubs.Weight'],//Is that how you bind to child record?
            yField: ['GolferName']
        }]
    });


var win = Ext.create('Ext.Window', {
    width: '100%',
    height: '100%',
    title: 'Breakdown of Golfers and their Clubs..',
    autoShow: true,
    layout: 'fit',
    items: chart
});
});

干杯，汤姆。

Answer 1

如果有人对此问题感兴趣，这已在 Sencha 论坛中得到解答。

图表的存储需要在存储中填充所有数据/记录（-vs- 存储填充有父记录，每个记录都有自己的关联子记录集）。所以，恐怕你想做的事情你不能直接做。

Sencha 支持团队成员的回答

解决方案似乎是将父模型和子模型的字段合并为一个新模型，该模型可以在图表的商店中与 groupField 和扩展系列结合使用。

Ext.define('Result', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'state', type: 'string', mapping:0 },
        { name: 'product', type: 'string', mapping:1 },
        { name: 'quantity', type: 'int', mapping:2 }
    ]
});
var store = Ext.create('Ext.data.ArrayStore', {
    model: 'Result',
    groupField: 'state',
    data: [
        ['MO','Product 1',50],
        ['MO','Product 2',75],
        ['MO','Product 3',25],
        ['MO','Product 4',125],
        ['CA','Product 1',50],
        ['CA','Product 2',100],
        ['WY','Product 1',250],
        ['WY','Product 2',25],
        ['WY','Product 3',125],
        ['WY','Product 4',175]
    ]
});

Ext.define('Ext.chart.series.AutoGroupedColumn', {
    extend: 'Ext.chart.series.Column',
    type: 'autogroupedcolumn',
    alias: 'series.autogroupedcolumn',
    gField: null,
    constructor: function( config ) {
        this.callParent( arguments );
        // apply any additional config supplied for this extender
        Ext.apply( this, config );
        var me = this,
            store = me.chart.getStore(),
            // get groups from store (make sure store is grouped)
            groups = store.isGrouped() ? store.getGroups() : [],
            // collect all unique values for the new grouping field
            groupers = store.collect( me.gField ),
            // blank array to hold our new field definitions (based on groupers collected from store)
            fields = [];
        // first off, we want the xField to be a part of our new Model definition, so add it first
        fields.push( {name: me.xField } );
        // now loop over the groupers (unique values from our store which match the gField)
        for( var i in groupers ) {
            // for each value, add a field definition...this will give us the flat, in-record column for each group 
            fields.push( { name: groupers[i], type: 'int' } );
        }
        // let's create a new Model definition, based on what we determined above
        Ext.define('GroupedResult', {
            extend: 'Ext.data.Model',
            fields: fields
        });
        // now create a new store using our new model
        var newStore = Ext.create('Ext.data.Store', {
            model: 'GroupedResult'
        });
        // now for the money-maker; loop over the current groups in our store
        for( var i in groups ) {
            // get a sample model from the group
            var curModel = groups[ i ].children[ 0 ];
            // create a new instance of our new Model
            var newModel = Ext.create('GroupedResult');
                // set the property in the model that corresponds to our xField config
                newModel.set( me.xField, curModel.get( me.xField ) );
            // now loop over each of the records within the old store's current group
            for( var x in groups[ i ].children ) {
                // get the record
                var dataModel = groups[ i ].children[ x ];
                // get the property and value that correspond to gField AND yField
                var dataProperty = dataModel.get( me.gField );
                var dataValue = dataModel.get( me.yField );
                // update the value for the property in the Model instance
                newModel.set( dataProperty, dataValue ); 
                // add the Model instance to the new Store
                newStore.add( newModel );
            }
        }
        // now we have to fix the axes so they work
        // for each axes...
        me.chart.axes.each( function( item, index, len ) {
            // if array of fields
            if( typeof item.fields=='object' ) {
                // loop over the axis' fields
                for( var i in item.fields ) {
                    // if the field matches the yField config, remove the old field and replace with the grouping fields
                    if( item.fields[ i ]==me.yField ) {
                       Ext.Array.erase( item.fields, i, 1 );
                       Ext.Array.insert( item.fields, i, groupers );
                       break;
                    }
                } 
            }
            // if simple string
            else {
                // if field matches the yField config, overwrite with grouping fields (string or array)
                if( item.fields==me.yField ) {
                    item.fields = groupers;
                }
            }
        });
        // set series fields and yField config to the new groupers
        me.fields,me.yField = groupers;
        // update chart's store config, and re-bind the store
        me.chart.store = newStore;
        me.chart.bindStore( me.chart.store, true );
        // done!
    }
})

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    legend: {
      position: 'right'  
    },
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['quantity'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Quantity',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['state'],
            title: 'State'
        }
    ],
    series: [
        {
            type: 'autogroupedcolumn',
            axis: 'left',
            highlight: true,
            xField: 'state',
            yField: 'quantity',
            gField: 'product'
        }
    ]
});

请看这里

Answer 2

作为 Sencha Fiddle 的尝试：https ://fiddle.sencha.com/#fiddle/207