坐标轴配置

G2 的图表坐标轴配置方法如下：

  1. chart.axis(field, {
  2.   title: null // 不展示标题
  3.   // ...
  4. });

参数 field 为对应的数据维度。

坐标轴的组成

使用 G2 对坐标轴进行配置之前，需要了解 G2 的坐标轴的组成。

G2 生成的坐标轴由如下五部分组成：

  • 标题 title
  • 坐标轴线 line
  • 文本 label
  • 刻度线 tickLine
  • 网格 gridAxis 坐标轴 - 图1
    通常的图表都有 x 轴和 y 轴，默认情况下，x 轴显示在图表的底部，y 轴显示在左侧（多个 y 轴时可以是显示在左右两侧）。通过为坐标轴配置 position 属性可以改变坐标轴的显示位置，具体可详见 api。

坐标轴标题 title

默认情况下，我们会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属性名。通过如下代码，用户可以配置标题的显示样式或者关闭标题显示。在G2 3.0 中由于大多数场景下用户不显示 title 所以我们默认关闭了 title 的显示。

  1. chart.axis('xField', {
  2.   title: null // 不展示 xField 对应坐标轴的标题
  3. });
  4.  
  5. chart.axis('xField', {
  6.   title: {} // 展示 xField 对应坐标轴的标题
  7. });
  8.  
  9. chart.axis('xField', {
  10.   title: {
  11.     textStyle: {
  12.       fontSize: 12, // 文本大小
  13.       textAlign: 'center', // 文本对齐方式
  14.       fill: '#999', // 文本颜色
  15.       // ...
  16.     }
  17.   }
  18. });

当需要为坐标轴设置别名时，需要在列定义中为对应数据字段设置 alias 属性，如下所示，更多关于列定义的内容请查看列定义。

  1. chart.scale('xField', {
  2.   alias: '这里设置标题的别名'
  3. });

更多关于坐标轴 title 属性的配置请查看API文档相关内容 axis 的 title 属性配置。

坐标轴线 line

在 line 属性上进行坐标轴线的配置。

  1. chart.axis('xField', {
  2.   line: {
  3.     lineWidth: 2, // 设置线的宽度
  4.     stroke: 'red', // 设置线的颜色
  5.     lineDash: [ 3, 3 ] // 设置虚线样式
  6.   }
  7. });

上述代码效果如下图所示：

image

坐标轴文本 label

(1) 不展示文本

  1. chart.axis('xField', {
  2.   label: null
  3. });

(2) 配置文本显示样式

  1. chart.axis('xField', {
  2.   label: {
  3.     offset: {number}, // 设置坐标轴文本 label 距离坐标轴线的距离
  4.     textStyle: {
  5.       textAlign: 'center', // 文本对齐方向，可取值为： start middle end
  6.       fill: '#404040', // 文本的颜色
  7.       fontSize: '12', // 文本大小
  8.       fontWeight: 'bold', // 文本粗细
  9.       rotate: 30, 
  10.       textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  11.     } || {function}, // 文本样式，支持回调 
  12.     autoRotate: {boolean} // 是否需要自动旋转，默认为 true
  13.   }
  14. });

(3) 格式化坐标轴文本显示

为 formatter 属性定义回调函数，如下所示：

  1. chart.axis('xField', {
  2.   label: {
  3.     // 使用 formatter 回调函数
  4.     formatter: val => {
  5.       return val + '元';
  6.     }
  7.   }
  8. });

在坐标轴上配置 formatter 仅在坐标轴上的文本有效，如果想要使得 tooltip 和图例上的信息也格式化，需要在列定义时指定格式化函数

  1. chart.source(data, {
  2.   xField: {
  3.     formatter: val => {
  4.       return val + '元';
  5.     }
  6.   }
  7. });
  8.  
  9. // 或者
  10. chart.scale('xField', {
  11.   formatter: val => {
  12.     return val + '元';
  13.   }
  14. });
  15.  
  1. const data = [
  2.   { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
  3.   { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
  4.   { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
  5.   { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
  6.   { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
  7.   { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
  8.   { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
  9.   { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
  10.   { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
  11.   { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
  12.   { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
  13.   { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
  14.   { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
  15.   { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
  16.   { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
  17. ];
  18. const chart = new G2.Chart({
  19.   container: 'c1',
  20.   forceFit: true,
  21.   height: 350,
  22.   padding: [ 20, 0, 80, 80 ],
  23.   plotBackground: {
  24.     stroke: '#ccc', // 边颜色
  25.     lineWidth: 1 // 边框粗细
  26.   } // 绘图区域背景设置
  27. });
  28. chart.source(data, {
  29.   x: {
  30.     alias: 'Daily fat intake', // 定义别名
  31.     tickInterval: 5, // 自定义刻度间距
  32.     nice: false, // 不对最大最小值优化
  33.     max: 96, // 自定义最大值
  34.     min: 62 // 自定义最小是
  35.   },
  36.   y: {
  37.     alias: 'Daily sugar intake',
  38.     tickInterval: 50,
  39.     nice: false,
  40.     max: 165,
  41.     min: 0
  42.   },
  43.   z: {
  44.     alias: 'Obesity(adults) %'
  45.   }
  46. });
  47. // 开始配置坐标轴
  48. chart.axis('x', {
  49.   label: {
  50.     formatter: val => {
  51.       return val + ' gr'; // 格式化坐标轴显示文本
  52.     }
  53.   },
  54.   grid: {
  55.     lineStyle: {
  56.       stroke: '#d9d9d9',
  57.       lineWidth: 1,
  58.       lineDash: [ 2, 2 ]
  59.     }
  60.   }
  61. });
  62. chart.axis('y', {
  63.   title: {
  64.     offset: 70,
  65.   },
  66.   label: {
  67.     formatter: val => {
  68.       if (val > 0) {
  69.         return val + ' gr';
  70.       }
  71.     }
  72.   }
  73. });
  74. chart.legend(false);
  75. chart.tooltip({
  76.   title: 'country'
  77. });
  78. chart
  79.   .point()
  80.   .position('x*y')
  81.   .size('z', [ 10, 40 ])
  82.   .label('name*country', {
  83.     offset: 0, // 文本距离图形的距离
  84.     textStyle: {
  85.       fill: '#000',
  86.       fontWeight: 'bold', // 文本粗细
  87.       shadowBlur: 5, // 文本阴影模糊
  88.       shadowColor: '#fff' // 阴影颜色
  89.     }
  90.   })
  91.   .color('#3182bd')
  92.   .opacity(0.5)
  93.   .shape('circle')
  94.   .tooltip('x*y*z');
  95. chart.guide().line({
  96.   start: [ 65, 'min' ],
  97.   end: [ 65, 'max' ],
  98.   text: {
  99.     content: 'Safe fat intake 65g/day',
  100.     position: 'end',
  101.     autoRotate: false,
  102.     style: {
  103.       textAlign: 'start'
  104.     }
  105.   },
  106. });
  107. chart.guide().line({
  108.   start: [ 'min', 50 ],
  109.   end: [ 'max', 50 ],
  110.   text: {
  111.     content: 'Safe sugar intake 50g/day',
  112.     position: 'end',
  113.     style: {
  114.       textAlign: 'end'
  115.     }
  116.   }
  117. });
  118. chart.render();

在线 demo

(4) 使用 html 自定义 label

在一些比较个性化的可视化需求里，通常会使用可视化隐喻，比如会使用人物照片来代替人物名字，使得可视化更直观，如下图所示：

这时可以通过为 label 进行如下配置：

  1. chart.axis('xField', {
  2.   label: {
  3.     htmlTemplate: value => {
  4.       return '<img src="' +imageMap[value] + '" width="30px"/>';
  5.     }
  6.   }
  7. });

完整代码

  1. const data = [
  2.   { name: 'John', vote: 35654 },
  3.   { name: 'Damon', vote: 65456 },
  4.   { name: 'Patrick', vote: 45724 },
  5.   { name: 'Mark', vote: 13654 }
  6. ];
  7. const imageMap = {
  8.   'John': 'https://zos.alipayobjects.com/rmsportal/mYhpaYHyHhjYcQf.png',
  9.   'Damon': 'https://zos.alipayobjects.com/rmsportal/JBxkqlzhrlkGlLW.png',
  10.   'Patrick': 'https://zos.alipayobjects.com/rmsportal/zlkGnEMgOawcyeX.png',
  11.   'Mark': 'https://zos.alipayobjects.com/rmsportal/KzCdIdkwsXdtWkg.png'
  12. }
  13.  
  14. const chart = new G2.Chart({
  15.   container : 'c2',
  16.   width : 600,
  17.   height : 250
  18. });
  19. chart.source(data, {
  20.   vote: {
  21.     min: 0
  22.   }
  23. });
  24. chart.legend(false);
  25. chart.axis('name', {
  26.   label: {
  27.     htmlTemplate: value => {
  28.       return '<img src="' +imageMap[value] + '" style="width:30px;max-width:none;"/>';
  29.     }
  30.   },
  31.   tickLine: null
  32. });
  33. chart.interval()
  34.   .position('name*vote')
  35.   .color('name', [ '#7f8da9', '#fec514', '#db4c3c', '#daf0fd' ])
  36.   .size(20)
  37.   .label('name');
  38. chart.render();

坐标轴刻度线 tickLine

在 tickLine 上可以配置坐标轴刻度线的长短（length）、颜色（stroke）、粗细（lineWidth），或者控制它的展示（tickLine: null，不展示刻度线）。

  1. chart.axis('xField', {
  2.   tickLine: {
  3.     lineWidth: 2,
  4.     length: 10,
  5.     stroke: 'red',
  6.     alignWithLabel:true
  7.   }
  8. });
  • value 可以设置负值，使得tickLine的方向相反
  1. chart.axis('genre', {
  2.   tickLine: {
  3.     length: -10
  4.   }
  5. });

Axis 坐标轴 - 图3

  • alignWithLabel 设置为负值，且数据类型为category时，tickLine的样式变为category数据专有样式。
  1. chart.axis('genre', {
  2.   tickLine: {
  3.     alignWithLabel: false
  4.   }
  5. });

Axis 坐标轴 - 图4

坐标轴子刻度线 subTickLine

通过设置 subTickCount 属性可以为两个主刻度间设置子刻度线的个数，同时通过 subTickLine 设置子刻度线样式。

  1. chart.axis('xField', {
  2.   subTickCount: 3,
  3.   subTickLine: {
  4.     length: 3,
  5.     stroke: '#545454',
  6.     lineWidth: 1
  7.   },
  8.   tickLine: {
  9.     length: 5,
  10.     lineWidth: 2,
  11.     stroke: '#000'
  12.   }
  13. });

Axis 坐标轴 - 图5

网格 grid

默认情况下，G2 会为 y 坐标轴生成网格线，而 x 轴不展示网格线。网格线的配置属性名为 grid，只要为坐标轴配置 grid 属性即可展示网格线。

在 grid 属性中配置网格显示的样式，如下代码所示：

  1. chart.axis('xField', {
  2.   grid: {
  3.     type: 'line',
  4.     lineStyle: {
  5.       stroke: '#d9d9d9',
  6.       lineWidth: 1,
  7.       lineDash: [ 4, 4 ]
  8.     },
  9.     align: 'center' // 网格顶点从两个刻度中间开始
  10.   }
  11. });

其他配置

设置坐标轴显示范围

每一种坐标轴范围的选择都会导致最后可视化结果的不同，坐标轴显示范围的设置需要在列定义中配置：

  1. // 方式 1
  2. chart.source(data, {
  3.   xField: {
  4.     type: 'linear',
  5.     min: 0,
  6.     max: 1000
  7.   }
  8. }); 
  9. // 方式 2
  10. chart.scale('xField', {
  11.   type: 'linear',
  12.   min: 0, 
  13.   max: 1000
  14. });

设置坐标轴刻度线个数

默认的坐标轴刻度线个数是 5 个，通过列定义，用户可以自定义坐标轴刻度线的个数。

  1. chart.source(data, {
  2.   xField: {
  3.     type: 'timeCat', // 声明该数据的类型
  4.     tickCount: 9
  5.   }
  6. });

设置坐标轴刻度线间距

对于连续类型的数据，G2 还支持设置坐标轴刻度线的间距（tickInterval 属性），同样需要在列定义中进行配置，但是需要说明的是，tickInterval 为原始数据值的差值，并且 tickCount 和 tickInterval 不可以同时声明。

  1. chart.source(data, {
  2.   xField: {
  3.     type: 'linear',
  4.     tickInterval: 1000
  5.   }
  6. });

坐标系两端保留一定的空白

对于分类数据的坐标轴两边默认会留下一定的空白，连续数据的坐标轴的两端没有空白刻度

坐标轴

是否两端有空白是列定义里面 range 属性决定的，分类列的 range 的默认值是 [ 1 / (count - 1), 1 - 1 / (count - 1) ]，可以修改这个值达到改变空白大小的目的。

  1. chart.source(data, {
  2.   xField: {
  3.     type: 'cat',
  4.     range: [ 0, 1 ]
  5.   }
  6. });

坐标轴在其他坐标系下的显示

不同的坐标系下坐标轴的显示不一样，默认的配置项也不同

  • 极坐标下的坐标轴上栅格线有圆形和多边形两种；
  • theta、helix 坐标系默认不显示坐标轴；
  • polar 坐标系发生 transpose 时也不显示坐标轴。
    Coord 坐标系 Legend 图例

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/axes.html