Come posso ottenere un grafico a barre ExtJS 4.1.X con una sola barra per mostrare correttamente l'etichetta di quella barra?

Question

Se si tenta l'esempio di codice dal vivo nella documentazione a:

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

Più di un'etichetta sembra bello:

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

Tuttavia, non appena si riduce il set di dati fino a un'etichetta, l'output appare orribile (notare l'etichetta per la barra appare a metà fuori dalla parte superiore dell'area del grafico, invece che allineata verticalmente con la barra è etichettare):

È questo un bug in ExtJS? Come posso aggirare questo? Esatto codice ExtJS che produce questo output:

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

Sì, il rendering predefinito sembra strano quando si tratta di un solo record.
Tuttavia può essere risolto o risolto.

Nel concetto, ignorare il renderer serie per fissare il punto di altezza e Y in caso di singolo record -

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

è possibile apportare modifiche ai valori ignorati effettivi (attr.height and attr.y) per soddisfare le tue esigenze visive.

Ecco il tuo esempio modificato per sembrare vicino a quello che ti aspetteresti.

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

Una soluzione è quella di sostituire

axisRange = to - from, 

on line di Axis.js in ExtJS con

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

evitare una divisione per zero essendo assegnato y coordinata dell'etichetta dell'asse .

Answer 3

Se vi sembra giusto, basta cambiare l'altezza a 150 da 300:

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

Answer 4

Aggiornamento a ExtJS 4.2 dovrebbe risolve questo.

Answer 5

Il problema non è in una barra, è a causa della gamma, quindi se si dispone di una vasta gamma e una barra le etichette non si ripeteranno, è bello sentire che è stato risolto nella versione 4.2, per favore conferma questo se Provaci.