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

我试图在ExtJs中绘制一个类似于Sencha的分组条形图

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

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

在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 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
});
});

//结束本地商店

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
});
});

干杯，

---

Tom.

如果有人对这个问题感兴趣，这已经在Sencha论坛上得到了回答

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

解决方案似乎是将父模型和子模型的字段合并到一个新模型中，该模型可以与groupField和extending series结合使用在图表的存储中

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'
        }
    ]
});

---

请参见

并作为Sencha Fiddle试用：