Как получить диаграмму Bar ExtJS 4.1.X с помощью одной панели, чтобы правильно отобразить эту метку?

Если вы попробуете пример в реальном времени в документации по адресу:

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? Как мне обойти это? Exact 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'
    }]
});

Ответы

Ответ 1

Одним из решений является замена

axisRange = to - from,

в строке 383 Axis.js в ExtJS с

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

чтобы предотвратить деление на ноль, присваиваемое координате y ось.

Ответ 2

Да, рендеринг по умолчанию выглядит странно, когда это всего лишь одна запись.
Он может быть исправлен или обработан, хотя.

В концепции переопределите средство рендеринга серии, чтобы зафиксировать высоту и 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;

        }}]
});

Ответ 3

Если это кажется правильным, просто измените высоту на 150 из 300:

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

Ответ 4

Обновление для ExtJS 4.2 должно быть исправлено.

Ответ 5

Проблема не в одном баре, это из-за диапазона, поэтому, если у вас есть широкий диапазон и один бар, метки не будут повторяться, здорово слышать, что оно исправлено в версии 4.2, пожалуйста, подтвердите это, если вы попробуйте.