ExtJS 4.2.1 图表轴标签答案

【问题标题】：ExtJS 4.2.1 Chart Axis labelingExtJS 4.2.1 图表轴标签
【发布时间】：2014-12-10 11:58:20
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

对我有用

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

enter image description here

【讨论】：

【解决方案2】：

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

您的图表是否会因为所有列而滚动到屏幕外？只是好奇。

现在您可以尝试创建具有设置列宽度的网格，类似这样，看看效果如何。

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);
        },
    }

    ....

【讨论】：