feat(static-mark): add axisX and axisY

[pearmini]

Axis

添加两个 Static Mark（组件）：AxisX 和 AxisY，有以下的作用：

• 只渲染坐标轴（比例尺可视化）
• 渲染任意坐标轴
• 数据驱动定位（TODO）

开始使用

// Spec
export function mockAxisXY(): G2Spec {
  return {
    type: 'view',
    padding: 'auto',
    scale: {
      x: {
        type: 'linear',
        domain: [5, 10],
        range: [0, 1],
      },
      y: {
        type: 'linear',
        domain: [5, 10],
        range: [0, 1],
      },
    },
    children: [
      { type: 'axisX', title: 'AxisX' },
      {
        type: 'axisY',
        title: 'AxisY',
        tickCount: 10,
        style: {
          labelFontSize: 14,
          gridLineWidth: 10,
          gridStroke: 'red',
        },
      },
    ],
  };
}

// API
const chart = new Chart({
  container: 'container',
  theme: 'classic',
  padding: 'auto',
});

chart
  .scale('x', {
    type: 'linear',
    domain: [5, 10],
    range: [0, 1],
  })
  .scale('y', {
    type: 'linear',
    domain: [5, 10],
    range: [0, 1],
  });

chart.axisX().title('AxisX');

chart
  .axisY()
  .title('AxisY')
  .attr('tickCount', 10)
  .style('labelFontSize', 14)
  .style('gridLineWidth', 10)
  .style('gridStroke', 'red');

chart.render();

案例

一条轴

export function mockAxisX(): G2Spec {
  return {
    type: 'axisX',
    padding: 'auto',
    height: 80,
    scale: {
      x: {
        type: 'linear',
        domain: [5, 10],
        range: [0, 1],
      },
    },
    tickCount: 10,
  };
}

极坐标系

export function mockAxisXYPolar(): G2Spec {
  return {
    type: 'view',
    padding: 'auto',
    coordinate: { type: 'polar' },
    scale: {
      x: {
        type: 'linear',
        domain: [5, 10],
        range: [0, 1],
      },
      y: {
        type: 'linear',
        domain: [5, 10],
        range: [0, 1],
      },
    },
    children: [
      {
        type: 'axisX',
        title: 'AxisX',
        tickFilter: (_, i, ticks) => i && i !== ticks.length - 1,
      },
      {
        type: 'axisY',
        title: 'AxisY',
        style: {
          labelFontSize: 14,
          gridLineWidth: 10,
          gridStroke: 'red',
        },
      },
    ],
  };
}

多条轴

export function alphabetIntervalAxis(): G2Spec {
  return {
    type: 'view',
    padding: 'auto',
    children: [
      {
        type: 'interval',
        transform: [{ type: 'sortX', by: 'y', reverse: true }],
        data: {
          type: 'fetch',
          value: 'data/alphabet.csv',
        },
        encode: {
          x: 'letter',
          y: 'frequency',
          color: 'steelblue',
        },
      },
      { // 添加一条额外的坐标轴
        type: 'axisY',
        position: 'right',
        scale: {
          y: {
            type: 'linear',
            independent: true,
            domain: [0, 10],
            range: [1, 0],
          },
        },
        style: {
          grid: false,
        },
      },
    ],
  };
}

TODO

• code
• tests
• demos

未来工作

• 数据驱动定位
• 添加 legend

[Aarebecca]

LGTM