Jak uzyskać wykres słupkowy ExtJS 4.1.X za pomocą jednego paska, aby prawidłowo wyświetlić etykietę paska?

Question

Jeśli spróbujesz przykład na żywo kodu w dokumentacji pod adresem:

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

Więcej niż jedna etykieta wygląda pięknie:

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

jednak jak najszybciej zmniejszyć zbiór danych do jednej etykiety, wynik wygląda okropnie (zwróć uwagę, że etykieta paska znajduje się na połowie poza obszarem wykresu, zamiast pionowego wyrównania do paska to jest etykieta):

Jest to błąd w ExtJS? Jak to obejść? Dokładny kod ExtJS, który generuje to wyjście:

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

Tak, domyślne renderowanie wygląda dziwnie, gdy jest to tylko jeden rekord.
Można go jednak naprawić lub obrobić.

W koncepcji przesłonić renderujący serii ustalić punkt wysokość i Y w przypadku pojedynczego rekordu -

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

można wprowadzać zmiany do wartości rzeczywistych przesłoniętych (attr.height and attr.y), aby dopasować twoje wizualne potrzeby.

Oto Twój przykład zmodyfikowany tak, aby wyglądać jak najbliżej.

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

Jednym rozwiązaniem jest zastąpienie

axisRange = to - from, 

na linii z Axis.js w ExtJS z

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

zapobiec dzielenie przez zero będzie przypisana do y współrzędna osi .

Answer 3

Jeśli wydaje się w porządku, po prostu zmienić wysokość do 150 z 300:

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

Answer 4

Aktualizacja do ExtJS 4.2 rozwiązuje ten powinien.

Answer 5

Problem nie jest w jednym takcie, to z powodu zasięgu, więc jeśli masz szeroki zasięg, a jeden pasek etykiety się nie powtórzą, to świetnie jest usłyszeć, że jest on naprawiony w wersji 4.2, proszę o potwierdzenie, jeśli Spróbuj.