如何使用单个酒吧获得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 } 
] 

但是只要你减少数据集下至一个标签，输出看起来很可怕（注意栏的标签出现在图表区域顶部的一半以外，而不是与栏垂直对齐它是一种标记）：

这是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

是的，当它只是一个记录时，默认渲染看起来很奇怪。
虽然它可以修复或解决。

在概念上，覆盖系列渲染固定高度和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, 

，以防止被零除，以取代

axisRange = to - from, 

在ExtJS的线的383 Axis.js被分配给y坐标轴的标签 。

Answer 3

如果它似乎是正确的，只是从300改变高度，以150：

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

Answer 4

更新到4.2的ExtJS应该修复此。

Answer 5

问题不在一个栏中，这是因为范围，所以如果您有一个广泛的范围和一个酒吧的标签不会重复，很高兴听到它是固定在4.2版本，请确认这是否你试一下。