javascript - Chart.js - Moment.js 找不到!您必须将其包含在 Chart.js 之前才能使用时间刻度

Question

我正在尝试显示一个显示过去 30 天数据的图表。该图表在我的 webpack 开发服务器上运行时有效。然而，当我构建它时它失败了(npm run build)。它产生的错误是:

("Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com")

我已经检查了在 Google 上能找到的所有可能的解决方案，但似乎都无法解决该问题。我已按要求包含了 moment.js，但这会引发大量新错误，其中最主要的是 moment.js 中未定义 window。我还应该注意，当我检查浏览器中的元素时，此错误显示:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://internal-server:5000/api/service_info/tt?severity=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我不认为这是原因，因为我成功地向后端的其他 API 发出 GET 请求，并且它们不会抛出此错误。更重要的是，启用了CORS。下面包含相关代码。

谢谢

let ctx = document.getElementById("canvas");
        this.chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: all_dates,
            datasets: [
              {
                data: cummulative_sums,
                borderColor: '#3cba9f',
                fill: false,
                label: 'Failures in past 30 days'
              },
              {
                data: comparison_cummulative_sums,
                borderColor: '#ce5fc3',
                fill: false,
                label: 'Failures 30 days prior'
              }
            ]
          },
          options: {
            legend: {
              display: true
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }],
            }
          }
        });

Answer 1

Chart.js 有以下两个版本:

独立构建

文件:

dist/Chart.js
dist/Chart.min.js

捆绑构建

文件:

dist/Chart.bundle.js
dist/Chart.bundle.min.js

独立构建不包含 moment.js，您必须包含它，但捆绑构建包含 moment.js。

添加捆绑版本将包含并修复问题:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>