ExtJS水平条形图Y轴标签自定义及图表收缩时标签宽度调整咨询

嘿，这两个问题在ExtJS水平条形图开发里确实很常见，我来给你详细说说解决方案：

ExtJS的Y轴（水平条形图里一般是category类型的轴，默认放在左侧）提供了label.renderer函数，这是自定义标签的核心入口。你可以通过这个函数完全控制标签的内容、样式甚至HTML结构，相当于给标签开了个“自定义加工厂”。

举个实际的配置例子：

axes: [{
    type: 'category',
    position: 'left',
    fields: ['productName'], // 绑定数据源对应的字段
    label: {
        // 自定义标签渲染函数
        renderer: function(value, layoutContext) {
            // 示例1：给标签加业务前缀
            return `产品: ${value}`;
            
            // 示例2：根据标签值动态改变样式
            // if (value.includes('热销')) {
            //     return `<span style="color: #e63946; font-weight: bold">${value}</span>`;
            // }
            // return value;
            
            // 示例3：手动截断长文本（配合tooltip使用更友好）
            // return Ext.util.Format.ellipsis(value, 10);
        },
        // 可选：设置标签的基础样式
        align: 'right',
        font: '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
    }
}]

renderer函数的第一个参数value是原始的标签值，你可以基于它做任何自定义处理，甚至返回HTML字符串来改变样式。

当图表容器被收缩时，Y轴标签很容易被截断或者挤压，这里有几个实用的处理方案：

1. 启用自动换行 #

给Y轴标签设置wrap: true，并指定最大宽度，超过宽度的文本会自动换行：

label: {
    wrap: true,
    width: 100, // 标签的最大宽度，按需调整
    // 也可以手动在renderer里插入换行符，适配长单词场景
    renderer: function(value) {
        return value.replace(/(.{8})/g, '$1\n'); // 每8个字符强制换一行
    }
}

2. 文本省略+悬浮提示 #

如果不想换行，希望节省空间同时不丢失完整信息，可以用这个方案：

label: {
    overflow: 'ellipsis',
    width: 80,
    tooltip: true // 鼠标悬停时自动显示完整标签文本
}

空间有限时这个方案特别友好，既保证布局整洁，用户又能随时查看完整内容。

3. 动态调整字体大小 #

监听图表的resize事件，当图表宽度小于某个阈值时，自动缩小标签字体：

listeners: {
    resize: function(chart, currentWidth) {
        const yAxis = chart.getAxis('left');
        // 当图表宽度小于400px时，缩小标签字体
        if (currentWidth < 400) {
            yAxis.setLabelConfig({
                font: '10px Arial'
            });
        } else {
            // 恢复默认字体大小
            yAxis.setLabelConfig({
                font: '12px Arial'
            });
        }
        chart.redraw(); // 重新绘制图表使配置生效
    }
}

4. 设置Y轴最小宽度 #

给Y轴指定minimumWidth，确保即使图表收缩，Y轴也有足够空间容纳标签：

axes: [{
    type: 'category',
    position: 'left',
    minimumWidth: 120, // Y轴的最小宽度，按需设置
    label: {
        // 其他标签配置
    }
}]

你可以根据自己的业务场景组合这些方案，比如同时启用自动换行和悬浮提示，或者结合resize事件动态调整字体，效果会更贴合需求。

内容的提问来源于stack exchange，提问作者shubham1js