使用antV/G2的this.chart.line().position('date*value').shape('smooth')画了两条样式不同的线,结果出来两个不同比例的坐标轴如图
其实这两条数据是可以连上的,两个数据集只能使用两个y轴,要想实现同步,只能让两个y轴数据联动,使用 G2 提供的 scale 同步的功能,将两个 y 轴的比例范围联动,实现同步效果。具体的实现方法是在设置 y 轴时,调用 sync
方法,将同步的关键字传入方法如下:
// 第一个 y 轴
this.chart.scale('value', {
sync: 'sync_1' // 同步关键字为 sync_1
});
// 第二个 y 轴
this.chart.scale('value2', {
sync: 'sync_1' // 同步关键字与第一个 y 轴相同
});
这样,两个 y 轴就会自动同步范围。如果需要取消同步,只需要将 sync
属性设置为 false
即可。
需要注意的是,在调用 sync
方法之前,需要先使用 scale
方法设置 y 轴的初始比例范围,否则同步功能可能会出现异常。
最终效果如图
两条线不同样式的线对接起来了