如何使用单个条形图获得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 }
]

但是,只要将数据集缩小到一个标签,输出就会变得很糟糕(请注意,条形图的标签显示在图表区域顶部的一半之外,而不是与要标记的条形垂直对齐):

这是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'
    }]
});

Answer 1

是的，当只有一条记录时，默认渲染确实看起来很奇怪。
\n不过它可以被修复或解决。

\n\n

从概念上讲，在单个记录的情况下，覆盖系列渲染器以修复高度和 y 点 -

\n\n

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

\n\n

\n\n

您可以更改实际覆盖值 ( attr.height and attr.y) 以满足您的视觉需求。

\n\n

这是您的示例，经过修改后看起来接近您的期望。

\n\n

\nvar store = Ext.create(\'Ext.data.JsonStore\', {\n    fields: [\'name\', \'data\'],\n    data: [\n        {\'name\': \'metric one\',\'data\': 5}\n        //,{\'name\': \'metric two\',\'data\': 7}\n    ]\n});\n\n\nExt.create(\'Ext.chart.Chart\', {\n    renderTo: Ext.getBody(),\n    width: 500,\n    height: 300,\n    animate: true,\n    store: store,\n    axes: [{\n        type: \'Numeric\',\n        position: \'bottom\',\n        fields: [\'data\'],\n        label: {\n            renderer: Ext.util.Format.numberRenderer(\'0,0\')\n        },\n        title: \'Sample Values\',\n        grid: true,\n        minimum: 0},\n    {\n        type: \'Category\',\n        position: \'left\',\n        fields: [\'name\'],\n        title: \'Sample Metrics\'}],\n    series: [{\n        type: \'bar\',\n        axis: \'bottom\',\n\n        highlight: true,\n        tips: {\n            trackMouse: true,\n            width: 140,\n            height: 28,\n            renderer: function(storeItem, item) {\n                this.setTitle(storeItem.get(\'name\') + \': \' + storeItem.get(\'data\') + \' views\');\n            }\n        },\n        label: {\n            display: \'insideEnd\',\n            field: \'data\',\n            renderer: Ext.util.Format.numberRenderer(\'0\'),\n            orientation: \'horizontal\',\n            color: \'#333\',\n            \'text-anchor\': \'middle\'\n        },\n        xField: \'name\',\n        yField: \'data\',\n        renderer: function(sprite, record, attr, index, store) {\n            if (store.getCount() == 1) {\n                attr.height = 80;\n                attr.y = 75;\n            }\n            return attr;\n\n        }}]\n});\xe2\x80\x8b\n

\n