Uncaught Error: Highcharts error #16

项目中用到Highcharts做图表,但是无意间发现console报错如下。


  • 分析

上图中我用框起来的错误提示已经highcharts提供了官方的错误解释地址:https://www.highcharts.com/errors/16,大家可以点击进去看一下。里面内容是英文的。

下面的这个网址是highcharts官方中文的错误说明,说的已经非常明白了。

点击打开链接

Highcharts error #16就是因为Highcharts 重复定义,这个错误发生的原因是在 Highcharts 的命名空间重复。

 Highcharts 的命名空间其实就存在于我们用 Highcharts 时引用的Highcharts.js文件。

所以原因就有两个:

  1. 重复引用了Highcharts.js相关文件。就是说引用了Highcharts.js又引用了Highstock.js文件。
  2. 动态加载包含 Highcharts 的页面就会导致 Highcharts 命令空间重复,正确的做法是将 Highcharts 相关的 js 引入在公共页面,另外尽量避免动态加载页面的做法。


参照这两个开始全文搜索Highstock.js,发现并没有引用该文件(我知道项目没用highstock,但还是要确认一下)。既然不是这个原因,我就在想是不是第二个原因,但第二个原因我没有太理解,因此并没有提醒到我什么。

后来在调项目时找到问题的突破口。也发现了忽略的一点:就是项目的主页面是由左侧菜单、上方的系统级提示信息页面与右侧的内容页面构成。当点击左侧菜单中某一项时,右侧内容页将由相应的html页面填充

而在我点击菜单时,发现几乎点一次就有一次的highcharts重复定义的错误报出,而且登录后的第一次点击(一定是点击的含有highcharts的菜单)也会报错。于是我推断主页面已经引入了Highcharts.js,又在各菜单的内容页面引入了一次,才会出现上述的情况。

果不其然,我找出了相应的html印证了我的推断。就是这样的。

  • 解决方法

将嵌套子页面的Highcharts.js去掉,只留主页面的引用,就不报错了。


  • 结论

在主页面上引用了Highcharts.js,又在嵌套于其中的子页面上引用了Highcharts.js,每当加载子页面时,就会造成Highcharts重复定义。


猜你喜欢

转载自blog.csdn.net/w926498/article/details/80536829