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

最终效果如图

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AntV G2 4.1.46版本的折柱图Line and Bar Chart)可以通过配置 `legend` 实现过滤。以下是一个简单的示例: ```html <div id="container"></div> ``` ```javascript import G2 from '@antv/g2'; // 数据源 const data = [ { year: '2010', sales: 10, profits: 3 }, { year: '2011', sales: 15, profits: 4 }, { year: '2012', sales: 13, profits: 2 }, { year: '2013', sales: 20, profits: 5 }, { year: '2014', sales: 25, profits: 6 }, { year: '2015', sales: 30, profits: 7 }, ]; // 初始化图表 const chart = new G2.Chart({ container: 'container', forceFit: true, height: 400, }); // 绘制折线图 chart.line().position('year*sales').color('sales'); // 绘制柱状图 chart.interval().position('year*profits').color('profits'); // 添加 legend,并配置点击事件 chart.legend({ position: 'right', clickable: true, itemFormatter: (val) => { // 根据 val 返回对应的图例名称 if (val === 'sales') { return '销售额'; } else { return '利润'; } }, onClick: (ev) => { const item = ev.item; const value = item.value; const checked = item.checked; // 根据 value 获取对应的图例名称 let name; if (value === 'sales') { name = '销售额'; } else { name = '利润'; } // 根据图例名称筛选数据 const filterData = data.filter((d) => { return d[name] !== null && d[name] !== undefined; }); // 更新图表数据 chart.changeData(filterData); // 更新图例状态 const legendItems = chart.get('legendController').legends.top[0].items; for (let i = 0, len = legendItems.length; i < len; i++) { const item = legendItems[i]; if (item.value === value) { if (checked) { item.marker = 'square'; } else { item.marker = 'check'; } } } chart.repaint(); }, }); // 渲染图表 chart.render(); ``` 上述示例中,我们使用了 `legend` 配置项来添加图例,并配置了点击事件,根据点击的图例名称筛选数据并更新图表。在更新数据后,我们还需要手动更新图例状态,以便正确显示选中和未选中状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值