Zingchart не определена ошибка

Я работаю со стартовым проектом mean.io и пытаюсь получить диаграмму для отображения с помощью zingchart.
Когда я проверяю свой код, я вижу ошибку zingchart не определена, которая выглядит следующим образом.

введите здесь описание изображения

Я новичок в использовании mean.io.
Я также должен упомянуть, что это происходит в новом пакете, который я создал, под названием "dashboard".

Вот мой контроллер (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;
  });

javascript angularjs zingchart mean.io
person Harry    schedule 17.06.2017    source источник
comment
вы не используете app.js?   -  person Sajeetharan    schedule 17.06.2017
comment
вы говорите о корне проекта app.js?   -  person Harry    schedule 17.06.2017
comment
все, что вы написали выше   -  person Sajeetharan    schedule 17.06.2017
comment
Я верю, что использую его   -  person Harry    schedule 17.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

С вашим кодом я вижу много проблем, позвольте мне упростить ваш код и показать ошибки,

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

у вас не может быть ng-init с внутри html, его нужно разместить внутри тела, также дублируются ng-контроллеры. Вам нужно иметь его только в одном месте.

Проверьте демо ниже

Демо

(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>

person Sajeetharan    schedule 17.06.2017
comment
спасибо, я ценю, что вы помогли мне с вышеизложенным. Я изменил свой код, чтобы отразить ваши предложения, и все еще получаю сообщение «Ошибка zingchart не определена». - person Harry; 17.06.2017
comment
проверьте, правильно ли загружена ссылка на zingchart на вкладке сети - person Sajeetharan; 17.06.2017
comment
Я действительно не вижу его там. Какие шаги я должен предпринять? - person Harry; 17.06.2017
comment
проверьте, есть ли какая-либо ошибка в консоли (перейдите на вкладку сети и посмотрите) - person Sajeetharan; 17.06.2017
comment
Да, есть. это та же ошибка, которую я разместил в исходном вопросе - person Harry; 17.06.2017

arrow_upward
0
arrow_downward

Если кто-то еще столкнется с этой проблемой или похожей, я опубликую свой ответ.

В пакет/папку, в которую вы хотите добавить зависимость 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>
person Harry    schedule 26.06.2017