柱状图x 轴 encode的编码对应值过长，会导致encode x轴 编码不显示

[hxz1993]

问题描述

在绘制柱状图时，x 轴的文本过长，导致 genre 字符不显示了

重现链接

No response

重现步骤

import { Chart } from '@antv/g2';

const chart = new Chart({ container: 'container' });

chart
.interval()
.data([
{ genre: 'Sports哈哈哈哈哈哈你你你版本他他哼哼唧唧哦', sold: 0 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
])
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'genre')
// .style('minHeight', 50);

chart.title({
title:'主标题',
subtitle:'副标题',
style:{
titleFontSize:32,
titleFill:'red'
}
})

chart.render();

预期行为

x 轴文本过长正常被截取，但是x 轴的genre 字符 能正常显示

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

这里可以通过 labelFormatter 解决哈：

chart.interval().label({
  labelFormatter: d => d.length > 5 ? d.slice(0, 5) + "...." : d
})

[hxz1993]

labelFormatter 不能用，这个是处理label,我这边是x 坐标显示内容

[pearmini]

哦，写错了：

chart.interval().axis('x', {
  labelFormatter: d => d.length > 5 ? d.slice(0, 5) + "..." : d
})

[hxz1993]

我不能指定说超过多少个字符截取，因为我们这边区域高度不是固定的，需要自适应，

[pearmini]

那你可以设置 paddingBottom 会取消旋转，自动隐藏：

const chart = new Chart({
  paddingBottom: 50
})