axis 坐标轴

如何配置坐标轴坐标轴的组成1. 坐标轴标题 title2. 坐标轴线 line3. 坐标轴文本 labels4. 坐标轴刻度线 tickLine5. 网格 grid其他配置1. 设置坐标轴显示范围2. 设置坐标轴刻度线个数3. 设置坐标轴刻度线间距4. 坐标系两端保留一定的空白坐标轴在其他坐标系下的显示相关实例如何配置坐标轴G2 的图表坐标轴配置方法如下：

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

参数 dim 为对应的数据维度。 坐标轴的组成使用 G2 对坐标轴进行配置之前，需要了解 G2 的坐标轴的组成。 G2 生成的坐标轴由如下五部分组成：

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

  1. 坐标轴标题 title默认情况下，我们会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属性名。通过如下代码，用户可以配置标题的显示样式或者关闭标题显示。
    1. chart.axis('xDim', {
    2.   title: null // 不展示 xDim 对应坐标轴的标题
    3. });
    5. chart.axis('xDim', {
    6.   title: {
    7.     fontSize: '12', // 文本大小
    8.     textAlign: 'center', // 文本对齐方式
    9.     fill: '#999', // 文本颜色
    10.     // ...
    11.   }
    12. });

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

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

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

  1. 坐标轴线 line在 line 属性上进行坐标轴线的配置。
    1. chart.axis('xDim', {
    2.   line: {
    3.     lineWidth: 2, // 设置线的宽度
    4.     stroke: 'red', // 设置线的颜色
    5.     lineDash: [3, 3] // 设置虚线
    6.   }
    7. });

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

  1. 坐标轴文本 labelslabels 的常用属性有：label、autoRotate。 (1) 不展示文本
    1. chart.axis('xDim', {
    2.   labels: null
    3. });

(2) 配置文本显示样式

  1. chart.axis('xDim', {
  2.   labels: {
  3.     autoRotate: true | false, // 文本是否允许自动旋转
  4.     label: {
  5.       textAlign: 'center', // 文本对齐方向，可取值为： left center right
  6.       fill: '#404040', // 文本的颜色
  7.       fontSize: '12', // 文本大小
  8.       fontWeight: 'bold', // 文本粗细
  9.       rotate: 30 // 文本旋转角度
  10.     }
  11.   }
  12. });

（3）格式化坐标轴文本显示 为 formatter 属性定义回调函数，如下所示：

  1. chart.axis('xDim', {
  2.   // 使用 formatter 回调函数
  3.   formatter: function(val) {
  4.       return val + '元';
  5.   }
  6. });

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

  1. chart.source(data, {
  2.   xDim: {
  3.     formatter: function(val) {
  4.       return val + '元';
  5.     }
  6.   }
  7. });
  9. // 或者
  11. chart.col('xDim', {
  12.   formatter: function(val) {
  13.       return val + '元';
  14.   }
  15. });

在线 demo (4) 使用 html 自定义 label 在一些比较个性化的可视化需求里，通常会使用可视化隐喻，比如会使用人物照片来代替人物名字，使得可视化更直观，如下图所示： 这时可以通过为 labels 进行如下配置：

  1. chart.axis('xDim', {
  2.   labels: {
  3.     custom: true, // 表示使用自定义 html 显示文本标签
  4.     renderer: function(value){
  5.       return 'axis 坐标轴 - 图3 +imageMap[value] + '" width="30px"/>';
  6.     }
  7.   }
  8. });

完整代码

  1. var data = [
  2.   {"name":"John","vote":35654},
  3.   {"name":"Damon","vote":65456},
  4.   {"name":"Patrick","vote":45724},
  5.   {"name":"Mark","vote":13654}
  6. ];
  7. var 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. }
  14. var chart = new G2.Chart({
  15.   id : '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.   title: null,
  27.   labels: {
  28.     custom: true,
  29.     renderer: function(value){
  30.       return 'axis 坐标轴 - 图4 +imageMap[value] + '" style="width:30px;"/>';
  31.     }
  32.   },
  33.   tickLine: null
  34. });
  35. chart.interval().position('name*vote').color('name', ['#7f8da9', '#fec514', '#db4c3c', '#daf0fd']).size(20).label('name');
  36. chart.render();
  1. 坐标轴刻度线 tickLine在 tickLine 上可以配置坐标轴刻度线的长短（value）、颜色（stroke）、粗细（lineWidth），或者控制它的展示（tickLine: null，不展示刻度线）。
    1. chart.axis('xDim', {
    2.   tickLine: {
    3.     lineWidth: 2,
    4.     value: 10,
    5.     stroke: 'red'
    6.   }
    7. });

value 可以设置负值，使得tickLine的方向相反 image

  1. 网格 grid默认情况下，G2 会为 y 坐标轴生成网格线，而 x 轴不展示网格线。网格线相关的配置属性有 grid gridAlign，只要为坐标轴配置 grid 属性即可展示网格线。 在 grid 属性中配置网格显示的样式，如下代码所示：
    1. chart.axis('xDim', {
    2.   grid: {
    3.     line: {
    4.       stroke: '#d9d9d9',
    5.       lineWidth: 1,
    6.       lineDash: [4, 4]
    7.     }
    8.   }
    9. });

gridAlign 属性用于设置栅格线同刻度线（tickLine）的对齐方式，可选择值如下：

  1. chart.axis('xDim', {
  2.   gridAlign: 'start' || 'middle'
  3. });

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

  1. // 方式 1
  2. chart.source(data, {
  3.   xDim: {
  4.     type: 'linear',
  5.     min: 0,
  6.     max: 1000
  7.   }
  8. });
  9. // 方式 2
  10. chart.col('xDim', {
  11.   type: 'linear',
  12.   min: 0,
  13.   max: 1000
  14. });
  1. 设置坐标轴刻度线个数默认的坐标轴刻度线个数是 5 个，通过列定义，用户可以自定义坐标轴刻度线的个数。
    1. chart.source(data, {
    2.   xDim: {
    3.     type: 'timeCat', // 声明该数据的类型
    4.     tickCount: 9
    5.   }
    6. });
  1. 设置坐标轴刻度线间距对于连续类型的数据，G2 还支持设置坐标轴刻度线的间距（tickInterval 属性），同样需要在列定义中进行配置，但是需要说明的是，tickInterval 为原始数据值的差值，并且 tickCount 和 tickInterval 不可以同时声明。
    1. chart.source(data, {
    2.   xDim: {
    3.     type: 'linear',
    4.     tickInterval: 1000
    5.   }
    6. });
  1. 坐标系两端保留一定的空白对于分类数据的坐标轴两边默认会留下一定的空白，连续数据的坐标轴的两端没有空白刻度 image 是否两端有空白是列定义里面 range 属性决定的，分类列的 range 的默认值是 [1 / (count - 1), 1 - 1 / (count - 1)],可以修改这个值达到改变空白大小的目的
    1. chart.source(data, {
    2.   xDim: {
    3.     type: 'cat',
    4.     range: [0, 1]
    5.   }
    6. });

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

极坐标下的坐标轴上默认不显示title，栅格线有圆形和多边形两种theta坐标系、map、helix 默认不显示坐标轴polar 坐标系发生transpose时也不显示坐标轴 相关实例1. 坐标轴标题设置别名 image

  1. 个性化坐标轴显示样式 image
  2. 格式化坐标轴文本显示 image
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="