Question

我需要使用JSON格式的EndPoint（webservice）的动态数据制作饼图，但显示错误$ injector：nomod。我想知道我尝试生成图表的方法是否正确。我该如何实施图表？

错误

    Uncaught Error: [$injector:modulerr] Failed to instantiate module appFaturamento due to:
    Error: [$injector:nomod] Module 'appFaturamento' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.5.3/$injector/nomod?p0=appFaturamento
        at http://localhost:51385/assets/scripts/angular.js:68:12
        at http://localhost:51385/assets/scripts/angular.js:2034:17
        at ensure (http://localhost:51385/assets/scripts/angular.js:1958:38)
        at module (http://localhost:51385/assets/scripts/angular.js:2032:14)
        at http://localhost:51385/assets/scripts/angular.js:4524:22
        at forEach (http://localhost:51385/assets/scripts/angular.js:321:20)
        at loadModules (http://localhost:51385/assets/scripts/angular.js:4508:5)
        at createInjector (http://localhost:51385/assets/scripts/angular.js:4430:19)
        at doBootstrap (http://localhost:51385/assets/scripts/angular.js:1710:20)
        at bootstrap (http://localhost:51385/assets/scripts/angular.js:1731:12)
    http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=appFaturamento&p1=E…http%3A%2F%2Flocalhost%3A51385%2Fassets%2Fscripts%2Fangular.js%3A1731%3A12)(anonymous function) @ 
angular.js:68(anonymous function) @ angular.js:4547forEach @ angular.js:321loadModules @ angular.js:4508createInjector @ 
angular.js:4430doBootstrap @ angular.js:1710bootstrap @ angular.js:1731angularInit @ angular.js:1616(anonymous function) @ 
angular.js:30709trigger @ angular.js:3127defaultHandlerWrapper @ angular.js:3417eventHandler @ angular.js:3405

我的Html页面

<!DOCTYPE html>
<html ng-app="appFaturamento">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="assets/scripts/angular.js"></script>
    <script src="assets/scripts/jquery-2.1.3.js"></script>
    <script src="assets/scripts/Chart.js/Chart.js"></script>
    <link href="assets/Content/bootstrap.css" rel="stylesheet" />
    <script src="assets/scripts/Chart.js/src/Chart.Core.js"></script>
</head>
<body >
    <div ng-controller="faturamentoCtrl">
        <div class="container" style="padding-top: 100px"  id="canvas-holder">
            <canvas id="chart-area" width="300" height="300" />
        </div>
    </div>
</body>
</html>

我的JSON数据

[{"AnoMes":"2016\/04","CodHex":"#FFFFFF","Operacao":"Troca","TradeMarketing":false,"ValorNF":116.639999389648},
    {"AnoMes":"2016\/04","CodHex":"#00CD66","Operacao":"Bonificação","TradeMarketing":false,"ValorNF":252467.370418549},
    {"AnoMes":"2016\/04","CodHex":"#00BFFF","Operacao":"Outras","TradeMarketing":false,"ValorNF":1526679.51233941},
    {"AnoMes":"2016\/04","CodHex":"#EEC900","Operacao":"Venda","TradeMarketing":false,"ValorNF":3145498.25285959}]

我的图表

var app = angular.module('bi-app', ['ngRoute']);

        app.factory("AppService", function ($location, $window, $templateCache, $http, $cookies, MsgService, ColorService, AppService)
        {

            var link = "http://localhost:51149/BIWebService.asmx"

            var chamarEndpoint = function (endpoint, params, success, error)
            {
                var url = link + "/" + endpoint + (params ? "JsonChamada=" + JSON.stringify(params) : "");
                $http.get(url)
                .then(function (response)
                {
                    success(response);
                });
            };
        });


        app.controller('faturamentoCtrl', function ($scope, $http)
        {
            AppService.chamarEndpoint('TrazerFaturamento', chamada, function (retorno) {
                $scope.faturamento = retorno.data;
            }, function () {
                swal('Erro ao carregar faturamentos');
            });

            Array.prototype.carregaDados = function (dados) {
                return this.map(function (obj) {
                    return obj[dados];
                });
            }

            var carregarFaturamento = document.getElementsByClassName('TrazerFaturamento');

            for (var i = 0, len = carregarFaturamento.length; i < len; i++)
            {
                var pieData = [
                {
                    value: dados.carregaDados('Operacao'),
                    color: dados.carregaDados('CodHex'),
                    label: dados.carregaDados('ValorNF')
                }];

                window.onload = function () {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx).Pie(pieData);
                };
            }

        });

Answer 1

首先，你有

<html ng-app="appFaturamento">

和

var app = angular.module('bi-app', ['ngRoute']);

他们需要具有相同的名称，使用

var app = angular.module('appFaturamento', ['ngRoute']);

另外，你在html中包含了最后一个脚本吗？

错误$ injector：modulerr AngularJs

1 个答案: