G2 怎么设置 x、y 轴标题显示的别名

Question

在问题 如何显示 x 轴的标题 中，我们介绍了怎么显示标题，但是显出出来的标题内容是字段的 id。比如下图的 x 轴标题显示的是字段 type ，在实际的业务中，这个字段 id 可能是服务器端存储的一个自增 id，没有任何语义的。

所以，一般在业务中，都是需要去显示这个标题的别名，这里有两种办法：

直接修改做表做标题的 content

chart.axis('type', {
  title: {
    text: '年龄区间', // 在这里直接指定 x 轴字段的的标题 text 为固定的文本
  },
});

这种方式最直白，在很多场景直接这么用就够了。但是还有另外一种更加 “G2”、“可是分析” 的方式，那就是使用修改字段列定义中的别名。

字段列定义 scale.alias

在可视化技术中， scale 是很常见的概念，简单理解就是将数据从 A 映射到 B 的一个转换函数。在 G2 中把 Scale 定义加强为对一个对于一个字段的描述。可以看下 G2 的 官方文档 。

一个字段的描述包含有：字段 id、名称、格式化、映射规则等等。所以更好的做法是：

chart.scale('type', {
  alias: '年龄区间',
});

给 type 字段设置了名称之后，后续只要涉及到更 type 字段相关的显示，都会用这个别名，一劳永逸，比如在 tooltip 中也会直接显示别名。

总结一下

scale 是可视化技术领域中，非常重要的一个概念，它是底层数据映射到画布 UI 的核心逻辑，在 G2 中，scale 扩展成对于字段的描述，是指一层简单的封装，好好学一下这个概念吧，对于你使用所有的图表库都会有好处。