react antv f2分组柱状图实现平移

本周在开发柱状图平移的时候遇到一些问题,普通柱状图可以实现平移的效果,分组柱状图会出现平移的时候会把剩下的数据全部展示出来,通过查看antv f2文档,发现实现平移效果的重点是设置横坐标的values属性,如图所示,histogramList是数据源,originDates是需要展示在当前视口的部分数据。踩坑的原因是分组柱状图是一个横坐标下需要展示多组数据,服务端返回的数据格式跟f2柱状图需要的格式不同,所以手动处理了一下,就变成同一个横坐标的数据对应多个对象。此时如果直接给values赋值只会展示部分数据,原因是values中有重复项,去重之后再赋值就可以实现分组柱状图平移效果了。具体代码看贴图
react antv f2分组柱状图实现平移_第1张图片

react antv f2分组柱状图实现平移_第2张图片

你可能感兴趣的:(react antv f2分组柱状图实现平移)