自定义 Label

简介

Label 文本标签是对当前的一组数据进行的内容标注，针对不同的图表对应不同的 label 类型，虽然 G2 默认的 label 文本类型可以满足大部分的场景需求，但是总有一些特殊需求无法满足，所以 G2 提供了自定义 Label 以及自定义 Label 布局函数的扩展机制。

自定义 Label

  1. import { registerGeometryLabel, GeometryLabel } from '@antv/g2';
  3. // Step 1
  4. // 自定义 Label 类
  5. // 需要继承 GeometryLabel 基类
  6. class CustomLabel extends GeometryLabel {}
  8. // Step 2
  9. // 注册 CustomLabel
  10. registerGeometryLabel('custom', CustomLabel);
  12. // Step 3
  13. // 使用
  14. chart
  15.   .line()
  16.   .position('x*y')
  17.   .label('y', {
  18.     type: 'custom',
  19.   });

自定义 Label 需要继承 GeometryLabel 基类，通过覆写相应的方法来定义 label 的渲染配置，关于 GeometryLabel 类的详细介绍请阅读 API 文档。

自定义 Label 布局函数

对于文本布局，有多种解决方案，为了更大的灵活，G2 提供了自定义 label 布局的机制，用户可以根据需求自定义 label 布局。

  1. import { registerGeometryLabelLayout } from '@antv/g2';
  3. // Step 1: 定义 label 布局函数
  4. function limitInShape(
  5.   labels: IGroup[],
  6.   shapes: IShape[] | IGroup[],
  7.   region: BBox,
  8. ) {
  9.   each(labels, (label, index) => {
  10.     const labelBBox = label.getCanvasBBox(); // 文本有可能发生旋转
  11.     const shapeBBox = shapes[index].getBBox();
  12.     if (
  13.       labelBBox.minX < shapeBBox.minX ||
  14.       labelBBox.minY < shapeBBox.minY ||
  15.       labelBBox.maxX > shapeBBox.maxX ||
  16.       labelBBox.maxY > shapeBBox.maxY
  17.     ) {
  18.       label.remove(true); // 超出则不展示
  19.     }
  20.   });
  21. }
  23. // Step 2: 注册 label 布局函数
  24. registerGeometryLabelLayout('limit-in-shape', limitInShape);
  26. // Step 3: 使用
  27. chart
  28.   .interval()
  29.   .adjust('stack')
  30.   .position('value')
  31.   .color('type')
  32.   .shape('slice-shape')
  33.   .label('type', {
  34.     layout: {      type: 'limit-in-shape',    },  });

关于 registerGeometryLabelLayout(type: string, layoutFn: GeometryLabelsLayoutFn) 接口的详细使用，请阅读 API 文档。