和 label.transform 相关

[hustcc]

label.transform

label 是以文本的形式来标注图形，让数据更加准确清晰。但是当 label 和图形进行组合显示在画布中的时候，可能需要额外做一些处理，让 label 文本显示的更好，这就是 label.transform 需要做的事情。

开始

label.transform 使用方式比较统一，举个例子。

chart
  .line()
  // ...
  .label({
    text: 'hello',
    transform: [
      { type: 'xxx', ...options }, // 👈🏻 这里指定 transform 类型
    ]
  });

选项

不同的 transform 有不同的功能和作用，当前 G2 内置了以下 label.transform。

• dodgeY - 对在 x 方向相交的标签在 y 方向上进行调整，防止标签重叠
• hideOverlap - 当 label 发生碰撞的时候进行隐藏，默认保留前一个，隐藏后一个
• spider - 调整标签沿坐标轴边沿两端对齐，适用于 polar 坐标系
• surround - 调整标签沿坐标轴边沿两端对齐，适用于 polar 坐标系
• limitInShape - 当标签和在背景 shape 容纳不下的时候隐藏，常用在 interval、rect、area 等大面积图形上
• xxcolor - 调整颜色，保证 label 在有背景 shape 清晰可见，常用在 interval、rect、area 等大面积图形上

当前存在的问题是，当前的 label.transform 零碎无章法，是针对一个一个的小点来特殊单独的做，更好的方式可以看看下面的命名 + 配置 的规范。

[hustcc]

ref #4254

label.transform 本质是对 label 进行一些二次变化，从而让 label 看的更清晰，所以从属性上来区分，也可以作为统一命名的一个依据：

• position - x y
• color - stroke
• visible
• ...

还有哪些？

---

规则：

• 命名使用处理的场景： overlap（label 之间碰撞）、overflow（限制在图形内）、contrast（颜色对比度限制）
• 配置
  • 对应的策略：hide、ellipsis、dodgeY、rotate、reverseColor、scale、() => {}...
  • gap、最小字号、颜色对比度阈值 等

举例：

• label 碰撞的时候，隐藏。

{ type: 'overlap', strategy: 'hide' }

• label 碰撞的时候，调整 Y。

{ type: 'overlap', strategy: 'dodgeY' }

• 超出图形区域的时候，缩小字号。

{ type: 'overflow', strategy: 'reduceFontSize', minFontSize: 8 }

• 颜色相近的时候，对比对不清晰：xxx -> reverseColor

{ type: 'contrast', strategy: 'reverseColor', contrastThreshold: 100  }

[hustcc]

另外，label 目前有 position 和 transform 分别的目的是怎么区分。

• position：top、bottom ...、area
• transform：spider... hideOverlap

感觉上，spider、surround 应该属于 position，设置一个初始的位置的方式，和 area 一样。

[pearmini]

我觉得这样的命名方式和 transform 的命名方式不统一：比如 stackY 和 dodgeX，pack 都是用来防止重叠的，但命名规则并不是：目的 + 配置 的形式。

// 不是这样
{ type: 'overlap', strategy: 'stackY' }

// 也不是这样
{ type: 'overlap', strategy: 'dodgeX' }

// 也不是这样
{ type: 'overlap', strategy: 'pack' }

[visiky]

目前看 limitInShape 是放不下就省略，但是 adjustPosition 貌似有 hide、move、ellipsis 等操作

[hustcc]

关于颜色对比度，可以有设计规范：https://webaim.org/resources/contrastchecker/ 。之前我们的做法是直接颜色取反，可能不一定是更好的做法。

[pearmini]

我觉得现在命名不统一确实是问题，但不一定按照：目的 + 方式 来做，也许可以直接通过 type 透出就好了，只不过这个 type 需要整理。

[hustcc]

那就是合并到一起，比如：overlapDodgeY

[hustcc]

标签规则，第二版本

规则：

• 命名使用处理的场景和策略： overlap（label 之间碰撞）、overflow（限制在图形内）、contrast（颜色对比度限制）
• 配置
  • 对应的策略：hide、ellipsis、dodgeY、rotate、reverseColor、scale、() => {}...
  • gap、最小字号、颜色对比度阈值 等

举例：

• label 碰撞的时候，隐藏。

{ type: 'overlapHide' }

• label 碰撞的时候，调整 Y。

{ type: 'overlapDodge' }

• 超出图形区域的时候，缩小字号。

{ type: 'overflowShrink', minFontSize: 8 }

• 超出图形区域的时候，隐藏。

{ type: 'overflowHide' }

• 颜色相近的时候，对比对不清晰反色、或者隐藏

{ type: 'contrastEnlarge', threshold: 100  }

{ type: 'contrastHide', threshold: 100  }

[hustcc]

标签规则，第三版本

规则：

• 命名使用处理的场景和策略： overlap（label 之间碰撞）、 overflow（限制在图形内）、contrast（颜色对比度限制）
• 配置
  • 对应的策略：hide、ellipsis、dodgeY、rotate、reverseColor、scale、() => {}...
  • gap、最小字号、颜色对比度阈值 等

举例：

• label 碰撞的时候，隐藏。

{ type: 'hideOverlap' }

• label 碰撞的时候，调整 Y。

{ type: 'dodgeOverlap' }

• 超出图形区域的时候，缩小字号。

{ type: 'shrinkOverflow', minFontSize: 8 }

• 超出图形区域的时候，隐藏。

{ type: 'hideOverflow' }

• 颜色相近的时候，对比对不清晰反色、或者隐藏

{ type: 'enlargeContrast', threshold: 100  }

{ type: 'hideContrast', threshold: 100  }

[Aarebecca]

最后两个不应该是 enlargeLowContrast 和 hideLowContrast 吗

[hustcc]

两种命名方式，一种是 策略动词+场景，一种是场景+策略动词。选一种~

[hustcc]

具体实现 PR，在这里：#4453

[visiky]

再增加一个将 label 限制在 canvas 或 plot 区域内的，溢出的话省略、偏移或隐藏。限制在 plot 内，是因为 plot 有 clip 配置属性，会对溢出的进行直接剪裁 @hustcc

[Liugq5713]

label transform 为函数的情况如何使用呢 ? 文档上不详细, 能帮忙介绍一下吗( 最好有示例代码

[pearmini]

label transform 为函数的情况如何使用呢

这是啥意思？

[Liugq5713]

[Liugq5713]

https://g2.antv.antgroup.com/spec/label/overview#%E9%80%89%E9%A1%B9options