ExtJS 柱形图标签使用显示：“外部”不起作用

Question

使用 ExtJS (4.2)，我试图简单地在柱形图中每列的顶部显示一个标签。这是我所拥有的一小部分：

label: {
    field: 'value',
    display: 'outside',
    orientation: 'horizontal',
    font: 'bold 12px Arial'
}

在这种情况下，图表上任何一列的任何位置都不会显示任何标签。

但是，如果我将显示值更改为“insideEnd”，则所有标签都会在每列的顶部正常显示。如果我将显示值更改为“insideStart”，则所有标签都可以在每列的底部显示。只要我将它设置为“外部”，它似乎就不起作用了。

我尝试通过在上述代码中添加自定义渲染器函数来缩小问题范围，并注意到当显示设置为“外部”时该函数甚至不会运行，但是如果我将显示更改为“insideEnd”或“insideStart”。几乎就像它一看到“外面”，就跳过了渲染器，什么也不做。

我被难住了。关于可能导致此问题的任何想法？

编辑（已解决）： 原因是我将柱形图系列的堆叠设置为 true。

stacked: true

我猜外部无法处理堆积柱形图。

Answer 1

在此fiddle 中使用与您自己相同的标签配置，并且标签显示在正确的位置。您能否提供您的确切代码的小提琴，我将更新此答案以提供帮助。我在这个小提琴中使用的代码如下供将来参考。

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite', 'Ext.window.MessageBox']);

Ext.onReady(function() {

    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [{
            'name': 'metric one',
            'data': 10
        }, {
            'name': 'metric two',
            'data': 7
        }, {
            'name': 'metric three',
            'data': 5
        }, {
            'name': 'metric four',
            'data': 2
        }, {
            'name': 'metric five',
            'data': 27
        }]
    });

    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
                }
            },
            label: {
                display: 'outside',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                font: 'bold 12px Arial',
                color: '#333'
            },
            xField: 'name',
            yField: 'data'
        }]
    });
});

您的问题可能归结于系列/其他图表配置，但您没有证明这一点。