加载JavaScript 文件的顺序

Question

我正在使用Chart.js绘制一些图形以便在浏览器中可视化。因此，我写了一个.js文件，正在用html代码加载。我收到了一些奇怪的问题，我绝对不明白。

以下加载JS文件的顺序正常进行，没有任何错误：

<script src="assets/js/plugins/line_chart/moment.min.js"></script>
<script src="assets/js/plugins/line_chart/Chart.min.js"></script>
<script src="assets/js/plugins/line_chart/chartjs-plugin-zoom.js"></script>
<script src="assets/js/plugins/line_chart/hammer.min.js"></script>

以下加载JS文件的顺序将引发错误：

<script src="assets/js/plugins/line_chart/Chart.min.js"></script>
<script src="assets/js/plugins/line_chart/chartjs-plugin-zoom.js"></script>
<script src="assets/js/plugins/line_chart/hammer.min.js"></script>
<script src="assets/js/plugins/line_chart/moment.min.js"></script>

错误：

Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
    at nn.en (Chart.min.js:7)
    at n.update (Chart.min.js:7)
    at he (Chart.min.js:7)
    at Object.update (Chart.min.js:7)
    at Qe.updateLayout (Chart.min.js:7)
    at Qe.update (Chart.min.js:7)
    at Qe.construct (Chart.min.js:7)
    at new Qe (Chart.min.js:7)
    at window.onload (line_chart_analysis.html:182)

问题是我正在使用Bootstrap-Studio，在这里我无法更改实现的顺序，因为它是自动完成的。

是否可以在我创建的JS文件中找到根本原因？

我也在定制的JS中使用了ready语句：

document.addEventListener("DOMContentLoaded", function(){
});

Answer 1

您需要包含Moment.js 之前 Chart.js。

Chart.js文档可以更好地突出显示此内容，但在installation page中对此进行了说明：

独立版本包括Chart.js以及颜色解析库。如果使用此版本，则时间轴的功能将必须在Chart.js之前包含Moment.js。

如果无法更改加载顺序，则可以改用Chart.js的bundled build（并且不要分别加载Moment.js）：

捆绑的版本在单个文件中包含Moment.js。如果需要时间轴并且要包含一个文件，则应使用此版本。如果您的应用程序已包含Moment.js，则不应使用此版本。否则，将两次包含Moment.js，这将导致页面加载时间增加以及可能的版本兼容性问题。捆绑版本中的Moment.js版本是Chart.js私有的，因此，如果您想自己使用Moment.js，最好使用Chart.js（非捆绑包）并手动导入Moment.js。