javascript - sencha - ¿Cómo obtengo un gráfico de barras ExtJS 4.1.X con una sola barra para mostrar la etiqueta de esa barra correctamente?

extjs tutorial

Question

Si prueba el ejemplo de código en vivo en la documentación en:

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

Más de una etiqueta se ve hermosa:

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

Sin embargo, tan pronto como reduce el conjunto de datos a una etiqueta, la salida se ve horrible (observe que la etiqueta de la barra aparece media fuera de la parte superior del área del gráfico, en lugar de alinearse verticalmente con la barra que debe etiquetar):

¿Es esto un error en ExtJS? ¿Cómo trabajo alrededor de esto? Código ExtJS exacto que produce esta salida:

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

El problema no está en una barra, es por el rango, así que si tienes un amplio rango y una barra las etiquetas no se repetirán, es genial escuchar que está corregido en la versión 4.2, confirma esto si lo intentas.

Answer 2

La actualización a ExtJS 4.2 debería arreglar esto.

Answer 3

Sí, la representación predeterminada se ve rara cuando es solo un registro.
Sin embargo, se puede arreglar o solucionar.

En concepto, anule el renderizador de la serie para fijar la altura y el punto y en caso de registro único -

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

Puede realizar cambios en los valores reales anulados ( attr.height and attr.y ) para satisfacer sus necesidades visuales.

Aquí está su ejemplo modificado para que se vea cerca de lo que cabría esperar.

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 4

Si parece correcto, simplemente cambie la altura a 150 desde 300:

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

Answer 5

Una solución es reemplazar

axisRange = to - from,

en la línea 383 de Axis.js en ExtJS con

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

para evitar que se asigne una división por cero a la coordenada y de la etiqueta del eje.