javascript - ExtJS 4.2.1 图表轴标签

Question

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

我知道我可以使标签垂直，但是否有其他选项可以更智能地缩放/放置标签？还是垂直地做它要走的路？

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
                    }
                }
            }

在此处输入图像描述