2012-04-20 50 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

私の問題は今解決されました。パネルが表示されるとすぐに、チャートのデータを読み込むために、storeの 'autoLoad'プロパティを 'true'に変更しなければなりませんでした。私はスタックチャートを使用していません。 ExtJS積み重ね棒グラフに何らかの問題があるようです。 – Shekhar

関連する問題