2012-04-20 4 views
1

패널 내부에 차트를 그리려합니다. 차트 막대는 올바르게 그려 지지만 차트를 그릴 때 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

은, 제목과 축 값이 차트에 표시되지 않는 다음과 같이 차트를 그리는 코드입니다.

아무도 왜 이것이 일어나고 있는지 말해 줄 수 있습니까 ??

미리 감사드립니다.


EDIT 1

아래로 legend를 이동 한 후, 나는 x 축 값을 가지고하지만 지금은 그 값이 전설 뒤에 숨겨진지고 또한 그 값은 패널의 외출된다. 누구든지 실제 차트 및 막대의 크기를 축 값에 맞게 적절하게 줄이는 방법을 알고 있습니까? 당신의 레이아웃 및/또는 패널에

enter image description here

답변

3

설정 및/또는 패딩을하고 변경 사항을 참조하십시오 내 차트는 이제 다음과 같이 보인다. 차트 자체가 아니라 차트 상위 컨테이너에 관한 것입니다.

+0

답장을 보내 주셔서 감사합니다. 확실히 width/padding 속성을 설정해 보겠습니다. 차트 상위 컨테이너의 잠재적 문제는 무엇입니까? 나는 '레이아웃'을 앵커, vbox에 맞게 설정하려고 시도했지만 출력은 동일하게 유지됩니다. ExtJS 4.0.3에 버그가 있다는 것을 알게되었으므로 새로운 버전 4.1RC3을 다운로드했지만 문제는 여전히 존재합니다. – Shekhar

+0

이 예제는 어떻게됩니까? http://docs.sencha.com/ext-js/4-0/#!/example/charts/Column2.html이 문제가 있습니까? – Natasha

+0

내 문제가 해결되었습니다. 패널이 표시되는 즉시 차트 데이터를로드하려면 저장소의 'autoLoad'속성을 'true'로 변경해야했습니다. 나는 누적 차트를 사용하지 않고있다. ExtJS 스택 막대 차트에 문제가있는 것 같습니다. – Shekhar