文本标签配置

阅读时间约 2 分钟

简介

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

image.png

如何显示文本标签

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

geometry.label();

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

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

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

image.png

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

文本标签类型

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

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

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

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

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

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

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

标签布局

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

image.png

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

  • overlap: label 防遮挡,为了防止 label 之间相互覆盖,通过尝试向四周偏移来剔除放不下的 label。
散点图普通 label 布局散点图指定 'overlap' label 布局
image.pngimage.png
  • fixedOverlap: 不改变 label 位置的情况下对相互重叠的 label 进行调整。
map 普通布局指定 'fixedOverlap' label 布局
image.pngimage.png
  • limitInShape: 剔除 shape 容纳不了的 label。
treemap 普通布局指定 'limitInShape' label 布局
image.pngimage.png

配置方式:

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

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