Question

我是Angular.JS的新成员。想使用chart.js制作图表

我已经用

安装了chart.js

npm install angular-chart.js --save

.state('index.dashboard', {
            url: "/dashboard",
            templateUrl: "modules/dashboard/dashboard.html",
            controller: 'dashboardController',
            data: { pageTitle: 'Dashboard' },
            resolve: {
                loadPlugin: function($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                            serie: true,
                            files: ['css/plugins/c3/c3.min.css', 'js/plugins/chartJs/Chart.min.js', 'js/plugins/d3/d3.min.js', 'js/plugins/c3/c3.min.js']
                        }, {
                            serie: true,
                            name: 'gridshore.c3js.chart',
                            files: ['js/plugins/c3/c3-angular.min.js']
                        }, {
                            serie: true,
                            name: 'angular-dygraphs',
                            files: ['bower_components/angular-dygraphs/src/angular-dygraphs.js']
                        }, {
                            serie: true,
                            files: ['css/style_2.css', 'js/plugins/highcharts/highstock.src.js']
                        }, {
                            serie: true,
                            name: 'highcharts-ng',
                            files: ['js/plugins/highcharts/highcharts-ng.js']
                        },{
                            serie: true,
                            name:"chart.js",
                            files:['js/plugins/chartJs/angular-chart.js']
                        },
                        //               {
                        // name: 'chart.js',
                        //                   files: ['bower_components/Chart.Zoom.js/src/chart.zoom.js']
                        // //               },
                        //               {
                        //                   name: 'angles',
                        //                   files: ['js/plugins/chartJs/angles.js']
                        //               },
                        {
                            files: ['css/plugins/jsTree/style.min.css', 'js/plugins/jsTree/jstree.min.js', 'css/plugins/iCheck/custom.css', 'js/plugins/iCheck/icheck.min.js']
                        }, {
                            name: 'ngJsTree',
                            files: ['js/plugins/jsTree/ngJsTree.min.js']
                        }, {
                            name: 'cgNotify',
                            files: ['css/plugins/angular-notify/angular-notify.min.css', 'js/plugins/angular-notify/angular-notify.min.js']
                        }
                    ]);
                },
                authenticated: authenticated
            }
        })

现在我将其添加到我的控制器

angular.module('inspinia',['chart.js'])
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);

我试过

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http','chart.js',  function($rootScope, $scope, $http) {
var a = 0;
}]);

但得到

的相同错误

未捕捉错误：[$ injector：modulerr]

请以正确的方式帮助我谢谢你的提议

Answer 1

您不必将chart.js注入控制器，

将其更改为，

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);

<强> DEMO

Answer 2

根据Tushar的建议，在>>> $package = App\Package::where('id', 224)->first() => App\Package {#800 id: 224, parcel_id: 2, weight: 10, created_at: "2016-12-29 14:00:58", updated_at: "2016-12-29 14:00:58", order_id: 115, } >>> $package->order => App\Order {#743 id: 115, user_id: 1, search_id: 1, created_at: "2016-12-29 14:00:58", updated_at: "2016-12-29 14:00:58", shipping_date: "2016-12-29 14:00:58", } >>> $order = App\Order::where('id', 115)->first() => App\Order {#804 id: 115, user_id: 1, search_id: 1, created_at: "2016-12-29 14:00:58", updated_at: "2016-12-29 14:00:58", shipping_date: "2016-12-29 14:00:58", } >>> $order->packages LogicException with message 'Relationship method must return an object of type Illuminate\Database\Eloquent\Relations\Relation' >>> $order->packages() => null之后的angular-chart.js中加入index.html脚本标记。
在初始化angular.js模块时，将chart.js添加为模块相关性，就像在第一个代码段中一样。
使用模块提供的指令，无需在控制器中注入任何内容。

Answer 3

请务必在app.js中导入，例如：

"use strict";

angular.module("yourmodulename",
[
    "ui.router",
     "chart.js" //<-- import it
]);

并在控制器中使用它...... 或者如果您使用OcLazy（用于延迟加载），例如：

.state("profile.index", {
                url: "/profile",
                templateUrl: "/app/view/template/profilo/profile.html",
                controller: "ProfileController",
                controllerAs: "profileCtrl",
                resolve: {
                    loadPlugin: function ($ocLazyLoad) {
                        return $ocLazyLoad.load([

                            {
                                name: "chart.js",
                                serie: true,
                                files: ["/app/view/assets/lib/bower/Chart.js/Chart.min.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.css"]
                            }
                        ]);
                    }

                }
            })

Answer 4

我遇到了同样的问题，但页面不同，所以我需要添加每个SIGLE PAGE 代码段，错误消失了。但是，我并不了解我需要添加的原因。

<script src="node_modules/Chart.min.js"></script>
<script src="node_modules/angular-chart.min.js"></script>

Answer 5

把

<script src="lib/chart.js/dist/Chart.min.js"></script>

前

<script src="lib/chart.js/dist/angular-chart.js"></script>

解决了我的问题

我已删除

（ 'MYAPP'，[ 'chart.js之']）

angular.module（'myapp'，['chart.js']）未捕获的错误：[$ injector：modulerr]

5 个答案: