ExtJs4到ExtJs5升級：GroupedColumn圖表不能正常工作

Question

我是Extjs5的新手。我正在將extJs4升級到ExtJs 5.我試圖實施一個分組列曲線圖，但沒有數據顯示，只有軸線可見。即使我沒有得到任何錯誤。 我的代碼如下：

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.Bar', 
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().items : [], 
     // 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) 
     cmpFields = []; 
    // first off, we want the xField to be a part of our new Model definition, so add it first 
    cmpFields.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 
     cmpFields.push({ name: groupers[i], type: 'int' }); 
    }*/ 

    for (var i = 0; i < groupers.length; i++) { 
     var name = groupers[i]; 
     cmpFields.push({name:name,type:'number'}); 
    } 

    // let's create a new Model definition, based on what we determined above 
    Ext.define('GroupedResult', { 
     extend: 'Ext.data.Model', 
     fields: cmpFields 
    }); 
    // 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 = 0; i < groups.length; i++) { 
     // get a sample model from the group 
     var curModel = groups[ i ].items[ 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 = 0; x < groups[ i ].items.length; x++) { 
      // get the record 
      var dataModel = groups[ i ].items[ 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.every(function(item, index, len) { 
     // if array of fields 
     if(typeof item.getFields()=='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.getFields(i)==me.yField) { 
        Ext.Array.erase(item.getFields(), i, 1); 
        Ext.Array.insert(item.getFields(), i, groupers); 
        break; 
       } 
      } 
     } 
     // if simple string 
     else { 
      // if field matches the yField config, overwrite with grouping fields (string or array) 
      if(item.getFields()==me.yField) { 
       item.setFields(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.CartesianChart', { 
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' 
    } 
] 
});  

我已經代替Ext.chart.series.Column使用Ext.chart.series.Bar，以使我的代碼兼容，ExtJS的5.您需要Ext.chart.series.Column不再有效的ExtJS的5.我還取得了其他次要本質的變化也可以在https://fiddle.sencha.com/#fiddle/hvk上查看這個例子。 我已經花了3天時間了。請幫忙！！提前致謝。

Answer 1

@Samir，如果你想有一個分組表是不使用疊堆放：虛假財產系列。修改@MonicaOlejniczak的代碼爲：

legend :{ 
    docked: right 
} 
series: { 
    ....... 
    ........ 
    stacked: false, 
} 

這應該可以解決您的問題。