ExtJS 4中图表的轴标签不可见

Posted 2023-02-22

【中文标题】ExtJS 4中图表的轴标签不可见

【英文标题】：Axis labels are not visible of an chart in ExtJS 4

【发布时间】：2012-05-01 22:13:29

【问题描述】：

我正在尝试在面板内绘制图表。图表条已正确绘制，但绘制图表时未显示 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 轴值，但现在这些值被隐藏在图例后面，而且这些值也超出了面板。有谁知道如何减小实际图表和条形的大小以正确适合轴值？我的图表现在如下所示：

【参考方案1】：

将 Width 和/或 Padding 设置为您的 Layout 和/或 Panel 并查看更改。我认为这是关于图表父容器而不是图表本身。

【讨论】：

感谢您的回复。我一定会尝试设置宽度/填充属性。图表父容器会有什么潜在问题？我试图将“布局”设置为适合、锚、vbox，但输出保持不变。我发现 ExtJS 4.0.3 存在一些错误，所以我下载了新版本 4.1RC3，但问题仍然存在。

这个例子怎么样？ docs.sencha.com/ext-js/4-0/#!/example/charts/Column2.html你有这个问题吗？

我的问题现在解决了。我必须将 store 的“autoLoad”属性更改为“true”，以便在面板显示后立即加载图表数据。我现在不使用堆积图。 ExtJS 堆积条形图似乎有问题。