ExtJS 柱形图标签使用显示：'outside' 不工作

Question

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

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

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

但是，如果我将显示值更改为 'insideEnd'，所有标签都可以在每列的顶部正常显示。如果我将显示值更改为 'insideStart'，所有标签都可以在每列底部正常显示。一旦我将其设置为 'outside'.

，它似乎就不起作用了

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

我被难住了。关于可能导致此问题的原因有什么想法吗？

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

stacked: true

我想 outside 不适用于堆积柱形图。

Answer 1

在此 fiddle 中使用与您自己相同的标签配置，并且标签显示在正确的位置。您能否提供 fiddle 和您的确切代码，我将更新此答案以提供帮助。我在此 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'
        }]
    });
});

您的问题可能与系列/其他图表配置有关，但您没有显示出来。

ExtJS 柱形图标签使用显示：'outside' 不工作

ExtJS Column Chart Label Using display: 'outside' Not Working

extjs

extjs4.2