需求描述
图表节点较多时,可能分布到屏幕可视范围之外,期望图表自动居中显示
调研分析
阅读官网文档:G6.Graph配置项,一下就看到了这个配置项:
看起来只要在初始化图表的配置里加上“fitView: true”就能万事大吉了(然鹅真的是这样吗◐.◑)
关于fitView的使用问题记录
① 设置后“没有效果”
这种情况是:已将fitView设为true,图表还是超出了屏幕
问题分析:开启fitView后,图表确实进行了自动缩放、居中的操作;但这些操作基于的“画布”可能并不是我们预期的“屏幕可视范围”,导致缩放后图表依然超出屏幕
解决思路:配置fitViewPadding,缩小画布范围
② 只有一个节点时,节点变得超大
这种情况是:已经设置了fitView、fitViewPadding,数据较多的情况下显示符合预期;但图表只存在一个节点(或者几个离得很近的节点)时,节点变得超大
问题分析:首先要充分理解fitView的作用——为了让图表最大限度地充满画布而自动进行缩放、偏移;只有一个节点的图表被放大到“充满画布”,自然会变得超大
解决思路:配置maxZoom,限制图表的最大缩放比例(根据官网文档,maxZoom和minZoom对于图表缩放比例具有最高优先级)
③ 图表缩放得太小
与第二个问题同理,可以调整fitViewPadding放大画布范围,也可配置minZoom限制图表最小缩放比例
总结
- 在初始化图表的配置里加上“fitView: true”,可以使图表自动缩放、偏移,以达到最大限度地充满画布的效果;
- 自适应效果不太好的两个调整方向:①配置fitViewPadding限制画布范围,②配置maxZoom、minZoom限制图表最大/最小缩放比例
参考网址
[1] G6.Graph配置项