antvis / G2

📊 The concise and progressive visualization grammar.
https://g2.antv.antgroup.com
MIT License
12.09k stars 1.59k forks source link

overflowHide 对于标签在图形上放置不下的时候,随机隐藏标签。 #6199

Closed Calmio-Y closed 4 months ago

Calmio-Y commented 5 months ago

问题描述

/**

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

chart.coordinate({ transform: [{ type: 'transpose' }] });

chart .interval() .data({ type: 'fetch', value: 'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv', format: 'csv', }) .transform({ type: 'sortX', reverse: true }) .encode('x', 'letter') .encode('y', 'frequency') .axis('y', { labelFormatter: '.0%' }) .label({ text: 'frequency', formatter: '.1%', textAlign: (d) => (+d.frequency > 0.008 ? 'right' : 'start'), fill: (d) => (+d.frequency > 0.008 ? '#fff' : '#000'), dx: (d) => (+d.frequency > 0.008 ? -5 : 5), transform: [ { "type": "overflowHide" } ] });

chart.render();

重现链接

No response

重现步骤

No response

预期行为

正常显示或者超出隐藏

平台

屏幕截图或视频(可选)

image

企业微信截图_17138633559

补充说明(可选)

No response

hustcc commented 5 months ago

期望是什么?

我估计是条形的高度刚好对有一些字符不够高,所以 hide 了。

Calmio-Y commented 5 months ago

期望:以上图片为例,对于同等宽的柱子,同等长度的label显隐一致

Runtus commented 5 months ago

期望是什么?

我估计是条形的高度刚好对有一些字符不够高,所以 hide 了。

我认领这个bug,看了下,源码是直接将label的坐标范围和柱子的坐标范围做比较,没做精度管理,label的坐标精度太小,已经是在在肉眼不可感知的像素(即0.00x甚至更小的像素)导致了label溢出,所以就被隐去了。

Calmio-Y commented 5 months ago
企业微信截图_17140962103676

面积图的overflowHide会有这个问题

hustcc commented 4 months ago

@Calmio-Y 看 @Runtus PR 调式的结果来看,应该是符合预期的,正好触发临界值,某些 label 字符的大小刚好超过的条形的区域。这个更字体有一些关系。

hustcc commented 4 months ago

企业微信截图_17140962103676 面积图的overflowHide会有这个问题

@Calmio-Y 这个问题,在 https://github.com/antvis/G2/pull/6209 中已经被 @Runtus 解决,5.1.20 版本中有效。

Calmio-Y commented 4 months ago

ok