ExtJS 4中的图表不显示轴标签

Question

我正在尝试在面板内绘制图表。正确绘制图表栏，但绘制图表时不显示x和y轴标签。绘制图表的代码如下：

Ext.require([
    'Ext.form.*',
    'Ext.chart.*',
    'Ext.layout.container.*'
]);

Ext.define('ilp.view.EmployeeCountControl', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.employeeCountControl',

    require : [
        'ilp.store.Employees',
        'ilp.store.Dimensions'
    ],

    layout : {
        type : 'vbox',
        align : 'stretch',
        pack : 'start'
    },

    title : 'Select dimension to view chart',

    initComponent : function() {
        this.items = [
            {
                xtype : 'combobox',
                fieldLabel : 'Select Dimension',
                store : 'Dimensions',
                queryMode : 'local',
                displayField : 'name',
                valueField : 'dimension',
                flex : 1
            },
            {
                xtype : 'chart',
                title : 'selected dimension',
                store : 'Employees',
                flex : 2,
                width: 150,
                height: 200,
                legend : {
                    position : 'right'
                },
                axes : [
                    {
                        title : 'Emp Count',
                        type : 'Numeric',
                        position : 'left',
                        fields : ['hpCount', 'nonhpCount'],
                        minimum : 0,
                        grid : true
                    },
                    {
                        title : 'selected dimension',
                        type : 'Category',
                        position : 'bottom',
                        fields : ['dimension']
                    }
                ],
                series : [
                    {
                        type : 'bar',
                        column :true,
                        stacked : true,
                        highlight: true,
                        axis : 'left',
                        xField : ['dimension'],
                        yField : ['hpCount', 'nonhpCount'],
                        yPadding : 10
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

以及得出的内容如下：

如您所见，标题和轴值未显示在图表上。

任何人都可以告诉我为什么会这样吗？

提前致谢!!

---

编辑1

将legend移到底部后，我得到了x轴值，但现在这些值隐藏在图例后面，而这些值也超出了面板。有谁知道如何减小实际图表和条形的大小以适当地适应轴值？我的图表现在看起来如下：

Answer 1

将宽度和/或填充设置为布局和/或面板，然后查看更改。我认为这是关于图表父容器而不是图表本身。