AntV G2Plot 柱状图添加文本标签 - 如何在柱子上方显示文本

AntV G2Plot 柱状图添加文本标签：在柱子上方显示文本

本文将介绍如何在 AntV G2Plot 库中为柱状图添加文本标签，并在柱子上方显示文本内容。使用 label 配置项可以轻松实现自定义文本位置、颜色、大小等样式。

1. 导入 G2Plot 库

import { Plot } from '@antv/g2plot';

2. 定义柱状图数据和配置项

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const plot = new Plot({
  data,
  padding: 'auto',
  height: 500,
  width: 600,
  xField: 'year',
  yField: 'sales',
  type: 'interval',
});

3. 添加 label 配置项

plot.label({
  position: 'middle', // 文本位置
  style: {
    fill: '#fff', // 文本颜色
    fontSize: 14, // 文本大小
    fontWeight: 'bold', // 文本粗细
  },
});

通过以上配置，在柱状图的中间位置添加了白色、粗体、14 号字的文本。可以根据需求调整文本的位置、颜色、大小等样式。