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重复定义。