The issue has been closed
问题描述
数据项长度超过 5 个字符，y 轴就会被截断；x 轴在显示日期类型，过密时自动倾斜，也会出现相同情况。
目测在绘图时只预留了固定宽度的轴作图范围。
<img width="1162" alt="image" src="https://user-images.githubusercontent.com/1549118/233815997-e7caf88e-49cf-4c61-ad04-bc7495e9d8d4.png">
<img width="1194" alt="image" src="https://user-images.githubusercontent.com/1549118/233816191-c9bd77d4-196c-4ed1-bbc7-101522a0d491.png">
期望结果
轴数据项应该正常显示不截断。（这块的视觉规范随业务而变化，G2 作为基础库不应该限制
如何重现
官方示例修改，以下代码，把 price 改下，y 轴 labelFormatter 改一下，也能重现
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
theme: 'classic',
autoFit: true,
});
const data = [
{
"city": "杭州市",
"price": 513347.68
},
{
"city": "绍兴市",
"price": 119576.69
},
];
chart
.interval()
.data(data)
.encode('x', 'city')
.encode('y', 'price')
// .axis('y', { labelFormatter: '.0%' });
chart.render();
额外信息
@Deathsteps 感谢反馈。
- 针对 y 轴，期望是 G2 自动根据文本的宽度，然后自动增加坐标的间距？
这个的弊端在于需要先渲染一次组件，然后拿到大小之后，再次重绘，带来性能上的接近 2 被开销。建议的一个做法是，业务代码中根据数据两的大小，然后 measureText 获得可能的宽度，然后设置为图标的左侧 pandding。
- 正对 x 轴，默认逻辑 labelAutoRotate 有些问题，后续会改成默认 labelAutoHide @Aarebecca 。先可以手动处理
.axis('x', { labelAutoHide: true, labelAutoRotate: false })
measureText
@Deathsteps 感谢反馈。
- 针对 y 轴，期望是 G2 自动根据文本的宽度，然后自动增加坐标的间距？
这个的弊端在于需要先渲染一次组件，然后拿到大小之后，再次重绘，带来性能上的接近 2 被开销。建议的一个做法是，业务代码中根据数据两的大小，然后 measureText 获得可能的宽度，然后设置为图标的左侧 pandding。
- 正对 x 轴，默认逻辑 labelAutoRotate 有些问题，后续会改成默认 labelAutoHide @Aarebecca 。先可以手动处理
.axis('x', { labelAutoHide: true, labelAutoRotate: false })
这个方案我理解是 work 的。但我感觉 G2 可以包掉相关逻辑，因为 G2 作图前已有相关信息
业务侧实现这个逻辑有个复杂点：
G2 作图用的字体大小不知道，轴刻度最大值不知道，还有轴 title 大小这些需要预估，计算可能有偏差。
当然，我可以再加一点 padding 预防一下。我建议 G2 这边还是补充一下相关逻辑。
另外，还有一个小问题是 Chart padding 规则不清晰，paddingLeft 是 Y 轴的 title 的左边开始算，G2 这边实现是从 Y 轴的最右边开始的，也就是 padding 有个 default 值，有点不太符合直觉。
再补充一点就是，X 轴在开启旋转时，为了防止截断，业务也要补一个计算逻辑 :(
是的，坐标轴的显示方式和预留的空间是有关系的，G2 当前做到会带来重绘，外部做的话，确实有你提的这些问题，我们在考虑下。
关于视图的一些间距设计，可以参考这个 demo。
posted by hustcc almost 2 years ago 
IssueHunt
