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

我试图在面板内绘制图表。图表栏正在绘制正确，但绘制图表时不显示x和y轴标签。代码绘制结构图如下所示：轴标签在ExtJS中的图表中不可见4

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

，什么被绘制如下：

enter image description here

正如你所看到的，不被显示在图表标题和轴值。

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

在此先感谢！

编辑1

移动legend至底部后，我得到x轴的值，但现在这些价值观越来越背后隐藏的传说，以及那些值外出面板。有谁知道如何减小实际图表和小节的大小以适合轴值？我的图表现在看起来如下：

enter image description here

来源

2012-04-20 Shekhar

集宽度和/或填充你的布局和/或面板和看到的变化。我认为这是关于图表父容器而不是图表本身。

来源

2012-04-21 16:28:22 Natasha

感谢您的回复。我一定会尝试设置宽度/填充属性。图表父容器会有什么问题？我试图设置“布局”以适应，锚定，vbox，但输出保持不变。我发现ExtJS 4.0.3有一些bug，所以我下载了新版本4.1RC3，但问题依然存在。 – Shekhar 2012-04-23 06:00:20

这个例子呢？ http://docs.sencha.com/ext-js/4-0/#!/example/charts/Column2.html你有这个问题吗？ – Natasha 2012-04-23 07:42:41

我的问题现在解决了。一旦显示面板，我必须将商店的'autoLoad'属性更改为'true'以加载图表数据。我现在不使用堆叠图表。看来ExtJS堆叠条形图存在一些问题。 – Shekhar 2012-04-23 08:50:05

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

回答

相关问题