AntV G2Plot 条形图添加文字注释 - 示例教程

在 AntV G2Plot 条形图上添加文字需要使用 G2Plot 的 annotation() 方法。以下是一个示例代码：

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

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

const barPlot = new Bar('container', {
  data,
  xField: 'sales',
  yField: 'year',
  xAxis: {
    maxLimit: 200,
  },
  annotations: [
    {
      type: 'text',
      position: [0, 'min'],
      content: '最低销量',
      offsetY: -10,
    },
    {
      type: 'text',
      position: ['max', 'min'],
      content: '最高销量',
      offsetX: -10,
      offsetY: -10,
      style: {
        textAlign: 'right',
      },
    },
  ],
});

barPlot.render();

在上面的代码中，我们在 annotations 属性中添加了两个文本类型的注释。第一个注释位于坐标轴的最低点，表示最低销量；第二个注释位于坐标轴的最高点，表示最高销量。我们可以通过 position 属性来指定注释的位置，通过 content 属性来设置注释的内容，通过 offsetX 和 offsetY 属性来调整注释的位置，通过 style 属性来设置注释的样式。