antv g2 绘制chart图表在纵轴坐标顶部加上单位

绘制chart图表的时候，一些情况下会要求在纵轴顶部加上单位，使用chart图表的辅助文本便可实现。

辅助文本 - position 属性基本用法

position 属性取值：{object} | {function} | {array}

array: 数组来配置位置 [ x, y ]，根据数组中的值的存在以下几种形式：

• a. 对应数据源中的原始数据;
• b. 关键字：‘min’, ‘max’, ‘median’, ‘start’, ‘end’，分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束
• c. x，y 都是百分比的形式，如 30%，在绘图区域定位。注意：对于 Y 轴，起始点为 Y 轴上方
• d. 1 和 2 两种类型的数据可以混用，使用百分比形式时 x 和 y 必须都是百分比形式

以下只是数组中值存在的一种形式，起始位置为左上角。

 ['start', 'end']     左上角
 ['start', 'start']   左下角
 ['end', 'start']     右下角
 ['end', 'end']       右上角
 先使用 position 定位之后再使用 offset 对文本进行位置微调  

import G2 from "@antv/g2"
var chart = new G2.Chart({
     
      container: 'xx',
      forceFit: true,
      padding: [60, 55, 'auto', 45],
      height: 260
    })
// 起始位置（左上角）
chart.guide().text({
     
  top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
  content: '(%)', // 显示的文本内容
  style: {
       // 文本的图形样式属性
    fill: '#9BB7EF', // 文本颜色
    fontSize: '12', // 文本大小
  }, // 文本的图形样式属性
  offsetX: -25, // x 方向的偏移量
  offsetY: -20, // y 方向偏移量
})
// 结束位置（右上角）
chart.guide().text({
     
  top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
  position: ['end', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
  content: '(亿元)', // 显示的文本内容
  style: {
      // 文本的图形样式属性
    fill: '#9BB7EF', // 文本颜色
    fontSize: '12', // 文本大小
  }, // 文本的图形样式属性
  offsetX: 10, // x 方向的偏移量
  offsetY: -20, // y 方向偏移量
})