使用G2的this.chart.line().position(‘date*value‘).shape(‘smooth‘)画两条线,实现连个Y轴同步联动

使用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 轴的初始比例范围,否则同步功能可能会出现异常。

最终效果如图

两条线不同样式的线对接起来了 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值