Geometry.label () is a method that maps the data value to the text of the graph. There are six ways to pass:

The first type is passed into false, not displaying label

geometry.label(false);

The second type of field name is passed to each graphic, and the corresponding values corresponding to the field are displayed on each graph.

(field: string) => Geometry;

geometry.label('x');

The third type of field name and configuration item, configuration display details

(field: string, secondParam: GeometryLabelCfg) => Geometry;

// Display the corresponding value of the x field on each graphic, and the color of the text is red at the same time 
 Geometry.label ('x', { 
   Style: {{ 
     Fill: 'Red', 
   }, 
 });

The fourth type is configured by returning the value of the callback function

(field: string, secondParam: LabelCallback) => Geometry;
type LabelCallback = (...args: any[]) => GeometryLabelCfg | null | undefined;

label('x', (xValue) => {
  return {
    content: xValue + '%',
  };
});

Fifth type of transmission recovery function configuration and configuration item. That is, the method of calling method three, and the combination of call method four.

(field: string, secondParam: LabelCallback, thirdParam: GeometryLabelCfg) => Geometry;
type LabelCallback = (...args: any[]) => GeometryLabelCfg | null | undefined;

six

(option: LabelOption) => Geometry;

interface LabelOption {
  field: string[];
  callback: (...args: any[]) => GeometryLabelCfg | null | undefined;
  cfg: GeometryLabelCfg;
}

GeometryLabelCfgConfiguration is as follows:

GeometryLabelCfg.type

string optional

g2 default specified Label type, of which the pole coordinate defaultspolar, Theta coordinate system defaultspie, Geometry is the default when it is Interval or Polygoninterval, others arebase. If you need to customize label, you can passregisterGeometryLabelRegister and specify through this configuration.

GeometryLabelCfg.offset

number optional

The offset distance of the relative data point.

GeometryLabelCfg.offsetX

number optional

The offset distance from the data point in the X direction.

GeometryLabelCfg.offsetY

number optional

The offset distance from the data point in the Y direction.

The text content displayed by

GeometryLabelCfg.content

string | IGroup | IShape | GeometryLabelContentCallback optional

is the value of the first field of the mapping.

// 1. String 
 {{ 
   Content: 'This is a label'; 
 } 

 // 2 group | Ishape 
 // Example https://g2.antv.vision/zh/examples/pie/basic#pie-custom-label 

 // 3. GeometrylabelcontentCallback recovery function is 
 Type GeometrylabelContentCallback = (data: Any, MAPPINGDATA: MAPPINGDATUM, Index: Number) => String | iGroup | Ishape; 

 {{ 
   Content: (data, mapingdata, index) => `x: $ {data.x}, y: $ {data.y}, z: $ {data.z}`; 
   // Example data shows x: 1, y: 2, z: a and x: 2, y: 2, z: b 
 }

GeometryLabelCfg.style

IStyle optional

Text graphics attribute style.

GeometryLabelCfg.autoRotate

boolean optional default: true

Whether it automatically rotates.

GeometryLabelCfg.rotate

number optional

Dang and only when autorotate isfalseEffective, used to set the rotation angle of text.

GeometryLabelCfg.labelLine

null | boolean | { style?: object } optional

The style attribute used to set the text connection line,nullindicates not to be displayed.

GeometryLabelCfg.labelEmit

boolean optional

only takes effect on the text under the polar coordinate, indicating whether the text is displayed at an angle, True indicates that it is turned on, and false indicates that it is closed.

GeometryLabelCfg.layout

GeometryLabelLayoutCfg | GeometryLabelLayoutCfg[] optional

Text layout type, supports the combination of multiple layout functions.

interface geometrylabellayoutcfg { 
   Type: String; // Label layout type 
   cfg ?: {[key: string]: Any}; // The configuration of each layout function is open to the user 
 }

layout.typeAt present, the following three types are provided:

• Overlap: Label anti -blocking, in order to prevent Label from covering each other, eliminate the label that cannot be put around by turning off the surroundings.
• FIXED-Overlap: The Label overlapped Label overlapping each other without changing the Label position.
• Limit-in-shape: Remove the label that cannot be accommodated by Shape.

If you need to configure other text layouts, you can passregisterGeometryLabelLayoutRegister a custom text layout, and then set it tolayout.type。

GeometryLabelCfg.position

“top” | “left” | “right” | “bottom” | “middle” | IntervalGeometryLabelPositionCallback optional

Only when Geometry is interval, specify the relative position of the current label and the current graphics, and the default support position includes: TOP, LEFT, Right, Bottom, MIDDLE.

IntervalGeometryLabelPositionCallbackReturn function type:

type IntervalGeometryLabelPositionCallback = (
  data: Datum,
  mappingData: MappingDatum,
  index: number
) => 'top' | 'left' | 'right' | 'bottom' | 'middle';

{
  position: (data, mappingData, index) => {
    if (data.x > 0) {
      return 'top';
    }
    return 'bottom';
  };
}

GeometryLabelCfg.animate

AnimateOption | false | null optional

Configure animation.