坐标轴配置。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

坐标轴的配置信息，可对坐标轴的各个组成元素进行配置，config 是由以下参数组成的对象：

属性 类型 使用说明
line Object/null 坐标轴线的配置信息，设置 null 时不显示，支持所有的 canvas 属性，参考绘图属性，如需调整显示层级，可设置 top: true 展示在最上层图形或者 top: false 展示在最下层图形。
labelOffset Number 坐标轴文本距离轴线的距离
grid Object/Function/null 坐标轴网格线的配置项，设置 null 时不显示，支持所有的 canvas 属性，参考绘图属性，支持回调函数，另外在极坐标下，可以通过配置 type: 'arc' 将其绘制为圆弧；如需调整显示层级，可设置 top: true 展示在最上层图形或者 top: false 展示在最下层图形。
tickLine Object/null 坐标轴刻度线的样式配置，设置 null 不显示，支持所有的 canvas 属性，参考绘图属性 ，如需调整显示层级，可设置 top: true 展示在最上层图形或者 top: false 展示在最下层图形。
label Object/Function/null 坐标轴文本配置，设置 null 不显示, 支持所有的 canvas 属性，参考绘图属性，支持回调函数，如需调整显示层级，可设置 top: true 展示在最上层图形或者 top: false 展示在最下层图形。
position String 坐标轴显示位置配置，x 轴默认位于底部 ‘bottom’，y 轴可设置 position 为 ‘left’、’right’

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

示例：

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

DEMO

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