javascript - 如何获得带有单个条形图的 ExtJS 4.1.X 条形图以正确显示该条形图的标签？

Question

如果您在以下位置尝试文档中的实时代码示例:

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

不止一个标签看起来很漂亮:

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

但是，一旦您将数据集减少到一个标签，输出看起来就很糟糕(请注意，条形图的标 checkout 现在图表区域顶部的一半之外，而不是与要标记的条形图垂直对齐):

这是 ExtJS 中的错误吗？我该如何解决这个问题？产生此输出的确切 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'
    }]
});

Answer 1

一种解决方案是更换

axisRange = to - from,

383 的 Axis.js 在 ExtJS 中

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

防止被零除分配给 y 坐标 轴标签。