Axis

坐标轴配置。F2 的坐标轴的组成如下:
Axis - 图1

术语英文
坐标轴文本label
坐标轴线line
坐标轴刻度线tickLine
坐标轴网格线grid

API

chart.axis(false)

不渲染坐标轴。

chart.axis(field, false)

关闭 field 对应的坐标轴。

  • field: String

代表坐标轴对应的数据字段名。

chart.axis(field, config)

为 field 对应的坐标轴进行配置。

  • field: String
    代表坐标轴对应的数据字段名。

  • config: Object
    坐标轴的配置信息,可对坐标轴的各个组成元素进行配置:

属性类型使用说明
lineObject/null坐标轴线的配置信息,设置 null 时不显示,支持所有的 canvas 属性,参考绘图属性
labelOffsetNumber坐标轴文本距离轴线的距离
gridObject/Function/null坐标轴网格线的配置项,设置 null 时不显示,支持所有的 canvas 属性,参考绘图属性,支持回调函数,另外在极坐标下,可以通过配置 type: 'arc' 将其绘制为圆弧
tickLineObject/null坐标轴刻度线的样式配置,设置 null 不显示,支持所有的 canvas 属性,参考绘图属性
labelObject/Function/null坐标轴文本配置,设置 null 不显示, 支持所有的 canvas 属性,参考绘图属性,支持回调函数
positionString坐标轴显示位置配置,x 轴默认位于底部 'bottom',y 轴可设置 position 为 'left'、'right'
topBoolean调整图层层级,true 表示展示在最上层图形,false 表示展示在最下层图形

注意:grid 和 label 为回调函数时,返回值必须是对象!

示例:

  1. chart.axis('field',{
  2. line:{
  3. lineWidth:1,
  4. stroke:'#ccc'
  5. },// 设置坐标轴线的样式,如果值为 null,则不显示坐标轴线,图形属性
  6. labelOffset:20,// 坐标轴文本距离轴线的距离
  7. tickLine:{
  8. lineWidth:1,
  9. stroke:'#ccc',
  10. length:5,// 刻度线长度
  11. },// 坐标点对应的线,null 不显示,图形属性
  12. grid:(text, index, total)=>{
  13. if(text ==='0%'){// 0% 处的栅格线着重显示
  14. return{
  15. stroke:'#efefef'
  16. };
  17. }
  18. return{
  19. stroke:'#f7f7f7'
  20. }
  21. },
  22. label:(text, index, total)=>{
  23. const cfg ={
  24. textAlign:'center'
  25. };
  26. // 第一个点左对齐,最后一个点右对齐,其余居中,只有一个点时左对齐
  27. if(index ===0){
  28. cfg.textAlign ='start';
  29. }
  30. if(index >0&& index === total -1){
  31. cfg.textAlign ='end';
  32. }
  33. cfg.text = text +'%';// cfg.text 支持文本格式化处理
  34. return cfg;
  35. }
  36. });

DEMO

场景描述demo
label 文本换行Axis - 图2
label 文本旋转Axis - 图3
label 回调Axis - 图4
grid 样式配置Axis - 图5
grid 回调Axis - 图6
弧形网格线Axis - 图7
iconfont 文本Axis - 图8

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/axis.html