バーのラベルを正しく表示するために、単一のバーでExtJS 4.1.X棒グラフを取得するにはどうすればよいですか？

Question

あなたがでドキュメントでのライブのコード例を試す場合：

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Bar

つのラベルが美しく見えるよりももっと：

data: [ 
    { 'name': 'metric one', 'data':5 }, 
    { 'name': 'metric two', 'data':27 } 
] 

しかし、すぐにあなたがデータセットを減らすよう1つのラベルまでは、出力がひどく見えます（バーのラベルは、バーと垂直に配置されているのではなく、それは）ラベルを付けることです。

これはExtJSののバグですか？これを回避するにはどうしたらいいですか？この出力を生成する正確なExtJSコード：

var store = Ext.create('Ext.data.JsonStore', { 
    fields: ['name', 'data'], 
    data: [ 
     { 'name': 'metric one', 'data':5 } 
    ] 
}); 

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 500, 
    height: 300, 
    animate: true, 
    store: store, 
    axes: [{ 
     type: 'Numeric', 
     position: 'bottom', 
     fields: ['data'], 
     label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     }, 
     title: 'Sample Values', 
     grid: true, 
     minimum: 0 
    }, { 
     type: 'Category', 
     position: 'left', 
     fields: ['name'], 
     title: 'Sample Metrics' 
    }], 
    series: [{ 
     type: 'bar', 
     axis: 'bottom', 
     highlight: true, 
     tips: { 
      trackMouse: true, 
      width: 140, 
      height: 28, 
      renderer: function(storeItem, item) { 
      this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views'); 
      } 
     }, 
     label: { 
      display: 'insideEnd', 
      field: 'data', 
      renderer: Ext.util.Format.numberRenderer('0'), 
      orientation: 'horizontal', 
      color: '#333', 
      'text-anchor': 'middle' 
     }, 
     xField: 'name', 
     yField: 'data' 
    }] 
}); 

Answer 1

はい、デフォルトのレンダリングは単なる1つのレコードでは奇妙に見えます。
しかし、それは固定することができますまたは回避策。コンセプトで

、単一のレコードの場合の高さとyの点を修正するために、一連のレンダラをオーバーライドする -

renderer: function(sprite, record, attr, index, store) { 
    if (store.getCount() == 1) { 
     attr.height = 80; 
     attr.y = 75; 
    } 
    return attr; 
} 

あなたは合わせて実際の上書き値（attr.height and attr.y）に変更を加えることができますあなたの視覚ニーズ。

ここでは、予想通りに見えるように変更した例を示します。

var store = Ext.create('Ext.data.JsonStore', { 
    fields: ['name', 'data'], 
    data: [ 
     {'name': 'metric one','data': 5} 
     //,{'name': 'metric two','data': 7} 
    ] 
}); 


Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 500, 
    height: 300, 
    animate: true, 
    store: store, 
    axes: [{ 
     type: 'Numeric', 
     position: 'bottom', 
     fields: ['data'], 
     label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     }, 
     title: 'Sample Values', 
     grid: true, 
     minimum: 0}, 
    { 
     type: 'Category', 
     position: 'left', 
     fields: ['name'], 
     title: 'Sample Metrics'}], 
    series: [{ 
     type: 'bar', 
     axis: 'bottom', 

     highlight: true, 
     tips: { 
      trackMouse: true, 
      width: 140, 
      height: 28, 
      renderer: function(storeItem, item) { 
       this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views'); 
      } 
     }, 
     label: { 
      display: 'insideEnd', 
      field: 'data', 
      renderer: Ext.util.Format.numberRenderer('0'), 
      orientation: 'horizontal', 
      color: '#333', 
      'text-anchor': 'middle' 
     }, 
     xField: 'name', 
     yField: 'data', 
     renderer: function(sprite, record, attr, index, store) { 
      if (store.getCount() == 1) { 
       attr.height = 80; 
       attr.y = 75; 
      } 
      return attr; 

     }}] 
});​ 

Answer 2

一つの解決策は、に割り当てられ、ゼロによる除算を防止するために

axisRange = to - from == 0 ? 1 : to - from, 

とExtJSのにAxis.jsの

axisRange = to - from, 

線上

を交換することです 軸ラベルの座標。それが正しいと思われる場合は

Answer 3

、ちょうど300から150までの高さを変更：ExtJSの4.2へ

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 500, 
    height: 150, 

Answer 4

更新がこれを修正する必要があります。

Answer 5

1つのバーに問題がありません。その範囲のためです。したがって、広い範囲と1つのバーがある場合、ラベルは繰り返されません。バージョン4.2で修正されていることを聞いてうれしいあなたはそれを試してください。