Javascript EXtJS图表栏/列不适合窗口容器，正在扩展/超出它

我使用EXtJS图表来绘制数据，出于某种原因，它会扩展到包含数据的窗口的右侧，当使用列时，会扩展到窗口的上方。这似乎是一个缩放问题，因为只有一个列/条，它可以缩放并完美地适应所有内容。

---

哈哈！我必须在我的存储/模型的字段中将type显式定义为int。它以前工作得很好，但出于某种原因，它修复了它

---

定义“最大值：”配置值也有助于实现这一点。

{
        title: title,
        closable:true,
        collapsible: true,

        //width: 600,
        height: 400,
        layout: 'fit',
           store: Ext.create('Ext.data.Store', {
        fields : [ 'metrics', 'dimensions' ],
        data : [ {'metrics':metrics, 'dimensions':dimensions}
        ]
           }),
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        var chart = Ext.getCmp('barchart');
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text : 'Add a Date Range',
            handler : function() {
                DateMenu.showBy(this,"bl");
                dateMenuContext=this;
            }
        }],
        items: [    
                    {
                xtype: 'chart',
                animate: true,
                shadow: true,
                  style: 'background:#fff',
                  store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: axesposition,
                    fields: x,
                    title: title+String(" [Metrics: "+String(metrics)).concat(((dimensions!=null)&&(dimensions!=""))? String(", Dimensions: "+dimensions+"]")  : "]"),
                    grid: true,

                     minimum: 0,
                    label: {
                    renderer: function(v) {
                    return String(v);
                    }
                    },

                    roundToDecimal: false
                }, {
                    type: 'Category',
                    position: categoryposition,
                    fields: y,
                    title: false
                }],
                series: [{
                    type: tp,
                    label : {
                        display : "outside",
                        color : '#333',
                        'text-anchor' : 'middle',
                        field : x

                    },
                    axis: seriesaxisposition,
                    gutter: 80,
                    xField: y, 
                    yField: x,

                     highlight: true,

                      tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item['yField'])+": "+String(item.value[1]));
                        }
                    }
                }]


    },
    ]
        };