加载 JavaScript <script> 文件的顺序

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 文件中有根本原因？

我还在ready自定义的 JS 中使用了语句：

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

});

Answer 1

您需要在 Chart.js之前包含Moment.js。Chart.js 文档可以更好地突出这一点，但在安装页面上有说明：独立构建包括 Chart.js 以及颜色解析库。如果使用此版本，则需要在 Chart.js 之前包含 Moment.js，以实现时间轴的功能。如果您无法更改加载顺序，则可以改用Chart.js的捆绑构建（并且不要单独加载 Moment.js）：捆绑的构建在单个文件中包含 Moment.js。如果您需要时间轴并希望包含单个文件，则应使用此版本。如果您的应用程序已经包含 Moment.js，则不应使用此构建。否则，Moment.js 将被包含两次，这会导致页面加载时间增加并可能出现版本兼容性问题。捆绑构建中的 Moment.js 版本是 Chart.js 私有的，因此如果您想自己使用 Moment.js，最好使用 Chart.js（非捆绑）并手动导入 Moment.js。