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 方向偏移量
})
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值