对于多个 y 轴，刻度数量级不同，绘制辅助线，起始位置基准是 y 主轴

[Song-yi-Tao]

想基于不同 y 轴绘制辅助线，下图绘制了两个不同数量级的 y 轴，它们的辅助线位置如下配置，最终呈现效果是以 y 主轴为基准定位。试图使用 getYScales() 分别获取刻度最大值再计算百分比，但该接口需要 render 后才可以调用，求助如何实现以不同轴为基准绘制辅助线。
version: ^4.2.8
{ start: ['start', num], end: ['end', num] }

[hustcc]

非常感谢反馈，我也试了一下，这个问题在 4.x 中确实不是很好实现，我们在 5.x 中考虑进去。

[hustcc]

在 G2 5.0 中可以很好的处理这个问题。下面代码复制到这里运行。

import { Chart } from '@antv/g2';

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2 },
  { time: '10:15', call: 2, waiting: 6, people: 3 },
  { time: '10:20', call: 13, waiting: 2, people: 5 },
  { time: '10:25', call: 9, waiting: 9, people: 1 },
  { time: '10:30', call: 5, waiting: 2, people: 3 },
  { time: '10:35', call: 8, waiting: 2, people: 1 },
  { time: '10:40', call: 13, waiting: 1, people: 2 },
];

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart.data(data);

chart
  .interval()
  .encode('x', 'time')
  .encode('y', 'waiting')
  .scale('y', { key: 'left-y' })  // 👈🏻
  .axis('y', { title: 'Waiting', style: { titleFill: '#5B8FF9' } });

chart
  .lineY()
  .data([5])
  .style('stroke', '#5B8FF9')
  .style('arrow', true)
  .scale('y', { key: 'left-y' })   // 👈🏻

chart
  .line()
  .encode('x', 'time')
  .encode('y', 'people')
  .encode('shape', 'smooth')
  .style('stroke', '#fdae6b')
  .style('lineWidth', 2)
  .scale('y', { key: 'right-y' })    // 👈🏻
  .axis('y', {
    position: 'right',
    grid: null,
    title: 'People',
    style: {
      titleFill: '#fdae6b',
    },
  });

chart
  .lineY()
  .data([2.5])
  .style('stroke', '#fdae6b')
  .style('arrow', true)
  .scale('y', { key: 'right-y' })  // 👈🏻

chart.render();

只需要 scale 的 key 相同，那么他们的基准就是相同的。