坐标轴配置

坐标轴和坐标作为图表的引导元素，可以帮助你将图形与原始值进行映射关联。在 G2 中，坐标轴是自动生成的，它的内容是由 scale 度量控制的，而渲染的细节则是由主题控制。

坐标轴组成

下图表示了 G2 坐标轴的组成部分：

坐标系控制着坐标轴和网格线的绘制，不同的坐标系下坐标轴的表现不同，下图展示了两种不同坐标系的坐标轴和网格线：

坐标轴配置

G2 提供了坐标轴的配置接口，主要用于坐标轴样式的配置：

1. chart.axis();

关于该接口的详细使用，可以阅读相关的 API 文档，下面主要向大家介绍关于坐标轴内容的配置方法。

title 配置

在本篇开头提到过，坐标轴的内容是由 scale 度量控制的，所以 scale 度量的名字控制着坐标轴的标题内容。 chart.axis() 只用于控制坐标轴的外观配置，在 G2 默认主题中，我们关闭了 title 的展示。

1. // 配置 title 样式
2. chart.axis('x', {
3. title: {
4. style: {
5. fill: '#1890ff',
6. },
7. },
8. });

默认情况下，我们会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属性名。当需要为坐标轴设置别名时，则需要通过 chart.scale() 接口，为对应的 scale 度量设置 alias 别名属性来改变坐标轴标题。

1. const data = [
2. { year: '1951 年', sales: 38 },
3. { year: '1952 年', sales: 52 },
4. { year: '1956 年', sales: 61 },
5. { year: '1957 年', sales: 145 },
6. { year: '1958 年', sales: 48 },
7. { year: '1959 年', sales: 38 },
8. { year: '1960 年', sales: 38 },
9. { year: '1962 年', sales: 38 },
10. ];
11. const chart = new Chart({
12. container: 'mountNode',
13. autoFit: false,
14. width: 400,
15. height: 300,
16. });

18. chart.data(data);
19. chart.scale('sales', {  alias: '销售量',});chart.axis('sales', {
20. title: {},
21. });

23. chart.interval().position('year*sales');

25. chart.render();

label 配置

坐标轴文本的内容同样也受 scale 度量的控制，G2 默认会生成所有的 label 内容，我们可以通过 chart.scale() 接口改变对应坐标轴 label 的显示：

1. const data = [
2. { year: '1951 年', sales: 38 },
3. { year: '1952 年', sales: 52 },
4. { year: '1956 年', sales: 61 },
5. { year: '1957 年', sales: 145 },
6. { year: '1958 年', sales: 48 },
7. { year: '1959 年', sales: 38 },
8. { year: '1960 年', sales: 38 },
9. { year: '1962 年', sales: 38 },
10. ];
11. const chart = new Chart({
12. container: 'mountNode',
13. autoFit: false,
14. width: 400,
15. height: 300,
16. });

18. chart.data(data);
19. chart.scale('sales', {  ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 20],});chart.axis('sales', {
20. title: {},
21. });

23. chart.interval().position('year*sales');

25. chart.render();

当需要对数值进行格式化时，也可以通过 chart.scale() 接口：

1. const data = [
2. { year: '1951 年', sales: 38 },
3. { year: '1952 年', sales: 52 },
4. { year: '1956 年', sales: 61 },
5. { year: '1957 年', sales: 145 },
6. { year: '1958 年', sales: 48 },
7. { year: '1959 年', sales: 38 },
8. { year: '1960 年', sales: 38 },
9. { year: '1962 年', sales: 38 },
10. ];
11. const chart = new Chart({
12. container: 'mountNode',
13. autoFit: false,
14. width: 400,
15. height: 300,
16. });

18. chart.data(data);
19. chart.scale('sales', {
20. ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 20],
21. formatter: val => `￥${val}`,});

23. chart.axis('sales', {
24. title: {},
25. });

27. chart.interval().position('year*sales');

29. chart.render();

chart.axis() 接口中的 label 属性则用于 label 的样式主题配置。

设置坐标轴数值范围

坐标轴的数值范围受数据的约束，同时也可以通过 chart.scale() 接口进行配置，每一种坐标轴数值范围的选择都会导致最后可视化结果的不同：

1. chart.scale('sales', {
2. min: 0,
3. max: 200,
4. });

设置坐标轴刻度线个数

默认的坐标轴刻度线个数是 5 个，同样可以通过 chart.scale()，用户可以自定义坐标轴刻度线的个数。

1. chart.scale('sales', {
2. min: 0,
3. max: 200,
4. tickCount: 10,
5. });

设置坐标轴刻度线间距

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

1. chart.scale('sales', {
2. min: 0,
3. max: 200,
4. tickInterval: 100,
5. });

设置坐标系两端留白

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

两端的留白可通过 chart.scale() 接口中的 range 属性进行配置，分类数据的 range 的默认值是 [ 1 / (count - 1), 1 - 1 / (count - 1) ]，count 代表数据的个数，可以修改这个值达到改变留白大小的目的。

1. const data = [
2. { year: '1951 年', sales: 38 },
3. { year: '1952 年', sales: 52 },
4. { year: '1956 年', sales: 61 },
5. { year: '1957 年', sales: 145 },
6. { year: '1958 年', sales: 48 },
7. { year: '1959 年', sales: 38 },
8. { year: '1960 年', sales: 38 },
9. { year: '1962 年', sales: 38 },
10. ];
11. const chart = new Chart({
12. container: 'mountNode',
13. autoFit: false,
14. width: 400,
15. height: 300,
16. });

18. chart.data(data);
19. chart.scale('year', {  range: [0.25, 0.75],});chart.scale('sales', {
20. min: 0,
21. max: 200,
22. tickInterval: 100,
23. });

25. chart.line().position('year*sales');

27. chart.render();