Question

我正在为我的项目使用requirejs，它适用于其他模块（jQuery，Handlebars，...），但不适用于Chartjs。

这是一个失败的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script src="scripts/libs/requirejs/require.js"></script>
    <script>
      require(['scripts/libs/chartjs/Chart.min'], function(Chart) {
        console.log("go"); // prints "go"
        console.log(Chart); // prints "undefined"
        var ctx = document.getElementById("test").getContext("2d"),
            chart = new Chart(ctx); // Throws a TypeError: Chart is not a constructor
      });
    </script>
  </head>
  <body>
    <canvas id="test" width="200px" height="200px"></canvas>
  </body>
</html>

require.js和Chart.min.js加载正常，但我无法使ChartJS工作。

以下是我在bower.json中的项目的依赖关系：

  "dependencies": {
    "jquery": "^2.2.0",
    "bootstrap": "^3.3.6",
    "select2": "^4.0.1",
    "select2-bootstrap": "^1.3.0",
    "handlebars": "~4.0.5",
    "requirejs": "^2.2.0",
    "Chart.js": "^2.0.0"
  }

安装的版本：

├── Chart.js#2.0.0
├─┬ bootstrap#3.3.6 (latest is 4.0.0-alpha.2)
│ └── jquery#2.2.0 (2.2.3 available, latest is 3.0.0-beta1)
├── handlebars#4.0.5
├── jquery#2.2.0 (2.2.3 available, latest is 3.0.0-beta1)
├── requirejs#2.2.0
├── select2#4.0.1 (4.0.2 available)
└── select2-bootstrap#1.3.0

知道我做错了吗？

Answer 1

如果您使用的是Chart.js的v2.0，请确保您获得最新版本（它对我来说非常适用于 2.0.0-beta2 ，但不适用于alpha）。此外，由于Chart.js依赖于 moment.js ，您还需要包含它。

对于旧版本的Chart.js v2.0（比如alpha），您必须将Chart.js作为旧脚本加载并使用全局变量（或noConflict()）。

对moment.js的依赖不是很明显（相关问题 - https://github.com/nnnick/Chart.js/issues/2110）。当您将Chart.js作为普通脚本文件加载时，这是您在控制台上获得的内容。

当require.js加载Chart.js时，此依赖关系会导致对moment.js的请求。

Answer 2

对于那些也是谷歌发送的人，我不得不整理文件以导出正确的变量：

requirejs.config({
    baseUrl: 'scripts',
    paths: {
        ...
        'chartjs': 'vendor/Chart'
    },
    shim: { 
        'chartjs': {
            exports: 'Chart'
        }
    },
});

ChartJS和require：图表未定义

2 个答案: