文本标签配置

简介

在图表中，标签是对当前的一组数据进行的内容标注。文本标签可包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。

如何显示文本标签

文本标签对应每一条数据记录，G2 除了提供文本标签的显示功能外，用户还可以指定显示的内容、配置文本样式等。使用如下接口配置：

geometry.label();

关于该接口的详细使用以及属性配置，可以翻阅 API 文档。

下面以折线图文本标签为例，我们想要在折线上显示 'value' 字段的值，我们只需要添加如下声明：

chart
  .line()
  .position('year*value')
  .label('value');

完整示例代码参见：基础折线图。

文本标签类型

针对不同的图表类型有不同的文本标签类型。G2 默认提供了 4 种类型：

• 'base'，默认类型，用于直角坐标系下的图表
• 'interval'，用于 Interval 几何标记下所有图形的文本标注，比如柱状图等
• 'pie'，专用于饼图的文本标注，带有文本连接线
• 'polar'，用于极坐标系下图表的文本标注

在 G2 内部，已经根据用户声明的图形语法自动使用对应的文本标签类型，用户不需要再额外声明。但是当有特殊需求时（比如自定义了文本标签），用户可以通过 label() 接口中的 type 属性指定具体的文本标签类型:

chart
  .interval()
  .position('x*y')
  .label('z', {
    type: 'polar',  });

关于自定义文本标签，请阅读自定义 label。

各个图表的文本标签展示：

图表	文本标签展示
折线图
层叠柱状图
饼图
玫瑰图
气泡图
树图

标签布局

对于文本标签，当数据过于密集时，就会存在文本遮挡重叠的问题，如下所示：

G2 内置了三种文本布局方案：

• overlap: label 防遮挡，为了防止 label 之间相互覆盖，通过尝试向四周偏移来剔除放不下的 label。

散点图普通 label 布局	散点图指定 'overlap' label 布局

• fixedOverlap: 不改变 label 位置的情况下对相互重叠的 label 进行调整。

map 普通布局	指定 'fixedOverlap' label 布局

• limitInShape: 剔除 shape 容纳不了的 label。

treemap 普通布局	指定 'limitInShape' label 布局

配置方式：

chart
  .polygon()
  .position('longitude*latitude')
  .label('name', {
    layout: {      type: 'fixed-overlap',    },    offset: 0,
    style: {
      fill: 'black',
      stroke: '#fff',
      lineWidth: 2,
    },
  });

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