Zingchart没有定义错误

我正在使用mean.io starter项目，我正在尝试使用zingchart来显示图表。
当我检查我的代码时，我看到一个看起来像这样的zingchart未定义的错误。Zingchart没有定义错误

我是新来使用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; 
    });

来源

2017-06-17 Harry

？ – Sajeetharan

你是在谈论项目根app.js？ – Harry

无论你上面张贴 – Sajeetharan

演示万一别人遇到这个问题，或者一个类似的，我会后我的答案。

在你想要添加zingchart依赖项的包/文件夹中，或者任何依赖关系，你必须把它添加到你的bower.json文件中。

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

然后在app.js文件，你需要这样注册

'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依赖确保zingchart依赖库在这个路径inlcuded /公/资产/ 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] } 
    ] 
}; 

    }); 
})();

最后，你可以在你不使用app.js在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>

来源

2017-06-26 13:19:17 Harry

你的代码，我看到很多问题，让我简化代码，并显示错误，

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

来源

2017-06-17 20:03:17 Sajeetharan

谢谢，我感谢你帮助我与上述。我改变了我的代码，以反映你的建议，我仍然得到'zingchart是未定义的错误'。 – Harry

检查您的zingchart参考是否正确加载网络选项卡 – Sajeetharan

我其实没有看到它在那里。我应该采取哪些步骤？ – Harry

Zingchart没有定义错误

回答

相关问题