坐标轴配置

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

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

    image.png

    坐标轴配置

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

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

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

    1. // 配置 title 样式
    2. chart.axis('x', {
    3.   title: {
    4.     style: {
    5.       fill: '#1890ff',
    6.     },
    7.   },
    8. });
    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.   title: {},
    20. });
    22. chart.interval().position('year*sales');
    24. chart.render();

    label 配置

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

    image.png

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

    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');

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

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

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

    设置坐标轴刻度线个数

    image.png

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

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

    设置坐标系两端留白

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

    image.png

    两端的留白可通过 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');