2016-04-19 9 views
-3

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); 
       }; 
      } 

     }); 

答えて

0

は手始めに、あなたは彼らは、同じ名前を持つ。また

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

を使用する必要が

<html ng-app="appFaturamento"> 

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

を持って、あなたは、HTMLでの最後のスクリプトが含まれたのですか?

+0

これだけです!スクリプトはページ本体にあります –

+0

それであなたの問題を解決しましたか? – Petru

関連する問題