ExtJS 4.2.1图表轴标记

Question

我的应用程序中有一个包含许多x值的图表。标签似乎不能正常工作，因为例如这样的标签之间没有空格：

我知道我可以将标签垂直化，但是还有其他选项来缩放/放置标签mor智能吗？或者是在垂直方向上去做？

Answer 1

我想我的第一个想法是你的标签每次都是相同的长度？ 垂直标记通常是首选，因为在给出的许多示例中，我们使用可变长度来表示名称。

由于所有列，您的图表是否会滚动屏幕？只是好奇。

现在你可以尝试创建一个设置宽度为列的网格，就像这样，看看它是如何做的。

series: [{

    ....

    renderer: function(sprite, storeItem, barAttr, i, store) {
        // set a width that gives you enough space 
        barAttr.width = 60;
        return barAttr;
    },

    ....

现在查看我的代码我经常使用Ext.String.ellipsis函数来设置我的列下标签的长度。所以下面这样的地方我修剪了8个字符：

axes: [{
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    label: {
        renderer: function(v) {
            return Ext.String.ellipsis(v, 8);
        },
    }

    ....

Answer 2

对我有用

{
                type: 'Category',
                position: 'bottom',
                fields: ['time'],
                title: 'Time',
                style: {
                    textAlign: 'center',
                },
                label: {
                    rotate: {
                        degrees: 270
                    }
                }
            }

enter image description here