Highcharts中的宽度自适应问题详解--源码分析

阅读前须知

在本文你将得到以下信息:

  • 导致Highcharts图表宽度无法自适应的根本原因
  • 解决chart宽度自适应的两种方法
  • 如何主动触发DOM事件

如有任何疑问或问题,欢迎探讨~

问题

今天在实现div元素的sizable的功能是,发现一个问题:
作为containerdiv元素宽度发生变化时,内部的Highcharts图表并没有自适应的变化。然而当浏览器窗口宽度发生变化导致container宽度变化时,Highcharts图表总是可以自适应调整。

分析

官网调研

由于chart的配置完全相同,问题很可能是Highcharts内部的实现导致的。基于这一点,查看Highcharts官方文档,在Highcharts 响应式一节,可以看到:

Highcharts 响应式

Highcharts官方文档提到,默认情况下Highcharts图表都是支持整个图表跟随图表容器响应式的,无需额外配置。这一点应当对应着浏览器窗口变化导致container宽度发生变化时,图表自适应的情况。同时,官方文档也提到可以调用reflow()方法来实现chart的自适应。
尽管官网给出了解决方案,当container宽度发生变化时调用reflow()可以解决这个问题,但并没有给出一个合理的解释:为什么直接修改container的宽度无法实现图表的自适应

源码分析

从官网给出的文档,可以获得一个信息:Highcharts本身对chart自适应提供了接口reflow(),且默认调用了reflow()方法来支持chart的宽度自适应。换句话说,Highcharts源码中调用reflow()方法的地方,很可能可以得到导致问题的原因
基于此,在Highcharts的源码中,发现了调用reflow()的关键方法setReflow()

setReflow()

在红框中,可以看到addEvent()的写法很像addEventListener()的用法,可以合理推测:Highcharts在setReflow()中,调用了addEventListener()方法,为浏览器的window对象添加了一个resize的监听事件,当window发生resize时,会调用reflow()函数。
这个推测可以合理解释当前的问题:浏览器的window变化会触发reflow()方法,而divresize无法触发reflow()
为了验证这个推测,必须验证以下两点:

  1. addEvent(win, 'resize', function (e) {})方法是对addEventListener()方法的包装,且第三个函数参数是对事件触发时的回调函数
  2. 第一个参数win是事件的监听者,且win在浏览器中就是window对象。

验证一
根据对源码的分析,在源代码/code/es-modules/parts/Utilities.js中找到了addEvent()的定义:

addEvent()

结论:推测一正确

验证二
基于源码找到win的定义:

win的定义

在浏览器中,通常window对象都不是undefined,基于立即执行函数表达式,可以得到结论:验证二正确,第一个参数winwindow对象

解决方案

基于上述分析,可以得到两种解决方案:

官网提供的reflow()

container宽度发生变化时调用官网提供的reflow(),这种方法直接参考官网文档,此处不做详细介绍。

主动触发windowresize事件

根据对源码的分析可以知道,Highcharts在window上监听了resize事件,那通过主动触发resize事件,应当同样可以保证chart的宽度自适应。
基于这一出发点,这里介绍如何 主动创建和触发 windowresize事件来解决这个问题。

事实上,MDN已给出了文档,提供了解决方案(以下标题可点击):

  • 创建和触发 events
  • Event()

这里直接给出答案,在container的宽度发生变化时调用以下代码即可:

const resizeEvent = new Event("resize");
window.dispatchEvent(resizeEvent);

事实证明,这种方法确实可行,问题得到解决!

结论

找到问题的根本原因是很重要的,至少在下一次,你不会跌倒在同一个坑里。
谢谢阅读~

你可能感兴趣的:(Highcharts中的宽度自适应问题详解--源码分析)