The issue has been closed

增加 label position 策略：exceedAdjust #6173

hustcc posted onGitHub

AntV Open Source Contribution Plan（可选）

我同意将这个 Issue 参与 OSCP 计划

Issue 类型

中级任务

任务介绍

当数据标签超出整个 canvas 画布的时候，会被剪裁掉，显示不全，所以需要给 label 标签做一个自动调整 x y 位置。

参考说明

参考：https://g2.antv.antgroup.com/spec/label/overlap-hide

增加一个新的类型 exceedAdjust，超出 canvas 画布的时候，自动反方向移动位置，防止被剪裁，代码可以参考。

如上图，标记区域的 label 应该自动向左移动，防止超出画布被剪裁。

posted by hustcc about 1 year ago

大佬想问下这个label自动调整需求是设置成默认生效吗？

posted by Runtus 12 months ago

大佬想问下这个label自动调整需求是设置成默认生效吗？

不是，是类似于 overflowHide 一样，组成一个配置，大部分代码都是可以参考的。

posted by hustcc 12 months ago

大佬想问下这个label自动调整需求是设置成默认生效吗？

不是，是类似于 overflowHide 一样，组成一个配置，大部分代码都是可以参考的。

好的明白了，配置也是和overlap一样在transform之下吗？

posted by Runtus 12 months ago

我认领这个任务

posted by Runtus 12 months ago

https://github.com/antvis/G2/issues/6199 这个问题是同类问题，可以熟悉之后，一起看看~

posted by hustcc 12 months ago

#6199 这个问题是同类问题，可以熟悉之后，一起看看~

get

posted by Runtus 12 months ago

@hustcc 大佬，我这更新对应文档时，需要放一个图片在md里，需要麻烦你帮忙上传到cdn上。 <img width="1325" alt="image" src="https://github.com/antvis/G2/assets/48038769/a0df6c3d-8396-49fd-8c8f-6160359a29ce">

posted by Runtus 12 months ago

@Runtus

使用这个地址：https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B2GwQbqkH_kAAAAAAAAAAAAADmJ7AQ/original

posted by hustcc 12 months ago

因为还没有看到 pr 的代码，所以在这里提前提醒一下，exceed 之后 Adjust 的策略：

adjust 的方向是 exceed 方向的反方向。

举个栗子：

如果是右侧超出，那么就像左边调整位置
如果是右下超出，那就向左上调整位置

注意处理整个画布都小于 label 大小的时候，不要出现代码的死循环。

posted by hustcc 12 months ago

因为还没有看到 pr 的代码，所以在这里提前提醒一下，exceed 之后 Adjust 的策略：

adjust 的方向是 exceed 方向的反方向。

举个栗子：

如果是右侧超出，那么就像左边调整位置

如果是右下超出，那就向左上调整位置

注意处理整个画布都小于 label 大小的时候，不要出现代码的死循环。

ok 不好意思，我想的是先把那个文档一起完善了一起提个pr，我明天把pr提上来

posted by Runtus 12 months ago

Fund this Issue

$0.00

Funded

Pull requests

增加 label position 策略：exceedAdjust #6173

AntV Open Source Contribution Plan（可选）

Issue 类型

任务介绍

参考说明

Company

Community

Support

Connect