Zingchart 未定义错误答案

【问题标题】：Zingchart is not defined errorZingchart 未定义错误
【发布时间】：2017-06-17 19:44:59
【问题描述】：

我正在使用 mean.io 入门项目，我正在尝试使用 zingchart 显示图表。
当我检查我的代码时，我看到一个 zingchart not defined 错误，看起来像这样。

我是使用 mean.io 的新手。
我还应该提到，这发生在我创建的一个名为“仪表板”的新包中

这是我的控制器（dashboard.js）：

(function() {
  'use strict';

  /* jshint -W098 */

  angular
    .module('mean.dashboard', ['zingchart-angularjs'])
    .controller('DashboardController', function($scope) {
      $scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
      ]
};

});
})();

我的html文件（index.html）：

<html ng-app="mean.dashboard" ng-init="checkCircle()">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script src="dashboard.js"></script>

<body ng-controller="DashboardController" ng-cloak layout="column">

    <!-- graph here -->
    <h1>Graph Test</h1>
    <div ng-controller="DashboardController">
    <div zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></div>
  </div>
  </div>
  </div>
</body>
</html>

我的 app.js 文件：

'use strict';

/*
 * Defining the Package
 */
var Module = require('meanio').Module;

var Dashboard = new Module('dashboard', ['zingchart-angularjs']);

/*
 * All MEAN packages require registration
 * Dependency injection is used to define required modules
 */

Dashboard.register(function(app, auth, database, circles) {

  //We enable routing. By default the Package Object is passed to the routes
  Dashboard.routes(app, auth, database, circles);

  //We are adding a link to the main menu for all authenticated users
  Dashboard.menus.add({
    title: 'dashboard',
    link: 'dashboard',
    roles: ['authenticated'],
    menu: 'main'
  });

  Dashboard.angularDependencies(['zingchart-angularjs']);

  return Dashboard;
  });

【问题讨论】：

你没有使用 app.js 吗？
你说的是项目根app.js吗？
您在上面发布的任何内容
我相信我正在使用它

标签： javascript angularjs mean.io zingchart

【解决方案1】：

我发现你的代码有很多问题，让我简化你的代码并显示错误，

<html ng-app="mean.dashboard" ng-init="checkCircle()">

你不能在 html 里面有 ng-init，它需要放在 body 里面，ng-controllers 也是重复的。您只需要将它放在一个地方即可。

查看下面的演示

演示

(function() {
  'use strict';
  angular
    .module('mean.dashboard', ['zingchart-angularjs'])
    .controller('DashboardController', function($scope) {
      $scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
    ]
};

    });
})();

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.2.2.min.js"></script>
<script src= "https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-angularjs-1.0.4.js"></script>
<body ng-app="mean.dashboard">
  <div ng-controller="DashboardController" id="resizable">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
  </div>
</body>

【讨论】：

谢谢，感谢您在上述方面帮助我。我更改了代码以反映您的建议，但仍然收到“未定义 zingchart 错误”。
检查您的 zingchart 引用是否在网络选项卡中正确加载
我实际上没有在里面看到它。我应该采取什么步骤？
检查控制台是否有任何错误（转到网络选项卡并查看）
是的，有。这是我在原始问题中发布的相同错误

【解决方案2】：

如果其他人遇到此问题或类似问题，我会发布我的答案。

在您想要添加 zingchart 依赖项或任何相关依赖项的包/文件夹中，您必须像这样将其添加到您的 bower.json 文件中。

{
  "name": "packagename",
  "version": "0.0.1",
  "dependencies": {
    "zingchart-angularjs": "latest" <!--dependency-->
  }
}

然后在您的 app.js 文件中，您需要像这样注册 zingchart 依赖项

'use strict';

/*
 * Defining the Package
 */
var Module = require('meanio').Module;

var packagename= new Module('packagename');

/*
 * All MEAN packages require registration
 * Dependency injection is used to define required modules
 */

packagename.register(function(app, auth, database, circles) {

  //We enable routing. By default the Package Object is passed to the routes
  packagename.routes(app, auth, database, circles);

  //register dependencies
  packagename.angularDependencies(['zingchart-angularjs']);

  return packagename;
});

然后您需要确保 zingchart 依赖库包含在此路径 /public/assets/lib 中，并确保此路径在您的 .bowerrc 文件中正确引用，如下所示

{
  "directory": "public/assets/lib"
}

然后您可以继续在您的 controller.js 文件中添加创建和呈现实际图表的代码

(function() {
  'use strict';
  angular
    .module('mean.packagename', ['zingchart-angularjs'])
    .controller('AppController', function($scope) {
      $scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
    ]
};

    });
})();

最后，您可以像这样在 html 文件中引用此代码

<body ng-app="mean.dashboard">
  <div ng-controller="AppController" id="resizable">
    <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
  </div>
</body>

【讨论】：