坐标轴配置

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

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

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

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

    默认情况下，我们会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属性名。通过如下代码，用户可以配置标题的显示样式或者关闭标题显示。在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文档相关内容 。

    坐标轴线 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. });
    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 属性定义回调函数，如下所示：

    在坐标轴上配置 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.   } // 绘图区域背景设置
    26. });
    27. chart.source(data, {
    28.   x: {
    29.     alias: 'Daily fat intake', // 定义别名
    30.     tickInterval: 5, // 自定义刻度间距
    31.     nice: false, // 不对最大最小值优化
    32.     max: 96, // 自定义最大值
    33.     min: 62 // 自定义最小是
    34.   },
    35.   y: {
    36.     alias: 'Daily sugar intake',
    37.     tickInterval: 50,
    38.     nice: false,
    39.     max: 165,
    40.     min: 0
    41.   },
    42.   z: {
    43.     alias: 'Obesity(adults) %'
    44.   }
    45. });
    46. // 开始配置坐标轴
    47. chart.axis('x', {
    48.   label: {
    49.     formatter: val => {
    50.       return val + ' gr'; // 格式化坐标轴显示文本
    51.     }
    52.   },
    53.   grid: {
    54.     lineStyle: {
    55.       stroke: '#d9d9d9',
    56.       lineWidth: 1,
    57.       lineDash: [ 2, 2 ]
    58.     }
    59.   }
    60. });
    61. chart.axis('y', {
    62.   title: {
    63.     offset: 70,
    64.   },
    65.   label: {
    66.     formatter: val => {
    67.       if (val > 0) {
    68.         return val + ' gr';
    69.       }
    70.     }
    71.   }
    72. });
    73. chart.legend(false);
    74. chart.tooltip({
    75.   title: 'country'
    76. });
    77. chart
    78.   .point()
    79.   .position('x*y')
    80.   .size('z', [ 10, 40 ])
    81.   .label('name*country', {
    82.     offset: 0, // 文本距离图形的距离
    83.     textStyle: {
    84.       fill: '#000',
    85.       fontWeight: 'bold', // 文本粗细
    86.       shadowBlur: 5, // 文本阴影模糊
    87.       shadowColor: '#fff' // 阴影颜色
    88.     }
    89.   })
    90.   .color('#3182bd')
    91.   .opacity(0.5)
    92.   .shape('circle')
    93.   .tooltip('x*y*z');
    94. chart.guide().line({
    95.   start: [ 65, 'min' ],
    96.   end: [ 65, 'max' ],
    97.   text: {
    98.     content: 'Safe fat intake 65g/day',
    99.     position: 'end',
    100.     autoRotate: false,
    101.     style: {
    102.       textAlign: 'start'
    103.     }
    104.   },
    105. });
    106. chart.guide().line({
    107.   start: [ 'min', 50 ],
    108.   end: [ 'max', 50 ],
    109.   text: {
    110.     content: 'Safe sugar intake 50g/day',
    111.     position: 'end',
    112.     style: {
    113.       textAlign: 'end'
    114.     }
    115.   }
    116. });
    117. chart.render();

    在线 demo

    (4) 使用 html 自定义 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: 'Patrick', vote: 45724 },
    4.   { name: 'Mark', vote: 13654 }
    5. ];
    6. const imageMap = {
    7.   'John': 'https://zos.alipayobjects.com/rmsportal/mYhpaYHyHhjYcQf.png',
    8.   'Damon': 'https://zos.alipayobjects.com/rmsportal/JBxkqlzhrlkGlLW.png',
    9.   'Patrick': 'https://zos.alipayobjects.com/rmsportal/zlkGnEMgOawcyeX.png',
    10.   'Mark': 'https://zos.alipayobjects.com/rmsportal/KzCdIdkwsXdtWkg.png'
    11. }
    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 上可以配置坐标轴刻度线的长短（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的方向相反

    • alignWithLabel 设置为负值，且数据类型为category时，tickLine的样式变为category数据专有样式。
    1. chart.axis('genre', {
    2.   tickLine: {
    3.     alignWithLabel: false
    4.   }
    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 坐标轴 - 图2

    网格 grid

    默认情况下，G2 会为 y 坐标轴生成网格线，而 x 轴不展示网格线。网格线的配置属性名为 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 和 不可以同时声明。

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

    是否两端有空白是列定义里面 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 坐标系默认不显示坐标轴；