G2Plot 条形图添加文字注释 - 使用文本注释功能

要在 G2Plot 条形图上添加文字，您可以使用 G2Plot 的文本注释功能。以下是一个示例代码片段，其中包含如何在 G2Plot 条形图上添加文本注释：

import { Chart, Interval, Annotation } from '@antv/g2plot';

const data = [
  { year: '2001', population: 41.8 },
  { year: '2002', population: 38 },
  { year: '2003', population: 33.7 },
  { year: '2004', population: 30.7 },
  { year: '2005', population: 25.8 },
  { year: '2006', population: 31.7 },
  { year: '2007', population: 33 },
  { year: '2008', population: 46 },
  { year: '2009', population: 38.3 },
  { year: '2010', population: 28 },
  { year: '2011', population: 42.5 },
  { year: '2012', population: 30.3 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

chart.data(data);

chart.scale({
  population: {
    nice: true,
  },
});

chart.axis('year', {
  tickLine: null,
});

chart.axis('population', {
  position: 'right',
  label: null,
  grid: null,
});

chart.tooltip({
  shared: true,
  showMarkers: false,
});

chart
  .interval()
  .position('year*population')
  .color('#5B8FF9')
  .label('population', {
    position: 'right',
    style: {
      fill: '#5B8FF9',
    },
  });

chart.annotation().text({
  position: ['2010', 28],
  content: 'Lowest population in 2010',
  style: {
    textAlign: 'center',
  },
});

chart.render();

在上面的示例中，我们在 2010 年的最低人口处添加了一个文本注释。我们使用 chart.annotation().text() 方法来添加注释。该方法需要一个 position 属性，用于指定注释的位置，以及一个 content 属性，用于指定注释的文本内容。我们还可以使用 style 属性来指定注释的样式，例如文本对齐方式。

您可以根据需要在图表中添加任意数量的文本注释。