坐标轴配置

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

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

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

坐标轴的组成

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

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

  1. 标题 title

  2. 坐标轴线 line

  3. 文本 label

  4. 刻度线 tickLine

  5. 网格 grid

Axis 坐标轴 - 图1

通常的图表都有 x 轴和 y 轴,默认情况下,x 轴显示在图表的底部,y 轴显示在左侧(多个 y 轴时可以是显示在左右两侧)。通过为坐标轴配置 position 属性可以改变坐标轴的显示位置,具体可详见 api

坐标轴标题 title

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

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

当需要为坐标轴设置别名时,需要在列定义中为对应数据字段设置 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. });

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

Axis 坐标轴 - 图2

坐标轴文本 label

  • 不展示文本
  1. chart.axis('xField', {
  2. label: null
  3. });
  • 配置文本显示样式
  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. });
  • 格式化坐标轴文本显示

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. chart.scale('xField', {
  10. formatter: val => {
  11. return val + '元';
  12. }
  13. });

Axis 坐标轴 - 图3

  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();
  • 使用 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. const chart = new G2.Chart({
  14. container : 'c2',
  15. width : 600,
  16. height : 250
  17. });
  18. chart.source(data, {
  19. vote: {
  20. min: 0
  21. }
  22. });
  23. chart.legend(false);
  24. chart.axis('name', {
  25. label: {
  26. htmlTemplate: value => {
  27. return '<img src="' +imageMap[value] + '" style="width:30px;max-width:none;"/>';
  28. }
  29. },
  30. tickLine: null
  31. });
  32. chart.interval()
  33. .position('name*vote')
  34. .color('name', [ '#7f8da9', '#fec514', '#db4c3c', '#daf0fd' ])
  35. .size(20)
  36. .label('name');
  37. 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 坐标轴 - 图4

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

Axis 坐标轴 - 图5

坐标轴子刻度线 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 坐标轴 - 图6

网格 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 为原始数据值的差值,并且 tickCounttickInterval 不可以同时声明。

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

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

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

Axis 坐标轴 - 图7

是否两端有空白是列定义里面 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 时也不显示坐标轴。