Comment puis-je obtenir un ExtJS 4.1.X Barre Graphique avec une seule barre de montrer que la barre de l'étiquette correctement?

Question

Si vous essayez de le vivre exemple de code dans la documentation:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.le graphique.de la série.Bar

Plus d'une étiquette est très beau:

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

Cependant dès que vous réduisez le jeu de données à un label, la sortie semble horrible(avis de l'étiquette de la barre de la moitié à l'extérieur du haut de la zone de graphique, au lieu de verticalement aligné avec la barre, il est à l'étiquette):

Est-ce un bug ExtJS? Comment puis-je contourner cela? Exact ExtJS code qui produit la sortie suivante:

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

Une solution est de remplacer

axisRange = to - from,

sur la ligne de 383 de Axis.js dans ExtJS avec

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

pour éviter une division par zéro étant affecté à l' y de coordonner le des étiquettes de l'axe.

Answer 2

Oui, le rendu par défaut n'a pas l'air bizarre quand c'est juste un enregistrement.
Il peut être fixe ou travaillaient autour, bien qu'.

Dans le concept, remplacer la série convertisseur de fixer la hauteur et y du point en cas d'enregistrement unique -

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

Vous pouvez apporter des modifications aux réelles valeurs remplacées (attr.height and attr.y) pour répondre à vos besoins visuels.

Ici est votre exemple modifié à regarder de près ce que vous attendez.

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 3

Si il me semble bon, il suffit de changer la hauteur de 150 à partir de 300 :

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

Answer 4

La mise à jour de ExtJS 4.2 corrige ce.

Answer 5

Le problème n'est pas dans un bar, c'est à cause de la gamme, donc si vous avez une large gamme et un bar les étiquettes ne vais pas le répéter, il est bon d'entendre que c'est corrigé dans la version 4.2 veuillez confirmer si vous l'essayez.