Question

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

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

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

但是，如果我将显示值更改为“insideEnd”，则所有标签在每列顶部都显示正常。如果我将显示值更改为“insideStart”，则所有标签在每列底部都显示正常。一旦我将它设置为“外部”，它似乎就无法正常工作。

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

我很难过。关于可能导致这种情况的任何想法？

编辑（求助）： 原因是我将柱形图系列的堆叠设置为真。

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

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

ExtJS柱形图标签使用display：＆＃39; outside＆＃39;不工作

1 个答案: