文本标签配置

文本标签配置

简介

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

image.png

如何显示文本标签

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

  1. geometry.label();

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

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

  1. chart
  2.   .line()
  3.   .position('year*value')
  4.   .label('value');

image.png

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

文本标签类型

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

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

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

  1. chart
  2.   .interval()
  3.   .position('x*y')
  4.   .label('z', {
  5.     type: 'polar',  });

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

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

| | 折线图 | image.png

| 层叠柱状图 | image.png

| 饼图 | image.png

| 玫瑰图 | image.png

| 气泡图 | image.png

| 树图 | image.png

标签布局

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

image.png

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

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

| | image.png

image.png

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

| | image.png

image.png

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

| | image.png

image.png

配置方式：

  1. chart
  2.   .polygon()
  3.   .position('longitude*latitude')
  4.   .label('name', {
  5.     layout: {      type: 'fixed-overlap',    },    offset: 0,
  6.     style: {
  7.       fill: 'black',
  8.       stroke: '#fff',
  9.       lineWidth: 2,
  10.     },
  11.   });

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