2017-05-19 7 views
0

"TypeError : Chart.defaults.global.tooltips is undefined"웹 페이지의 오류가 있습니다. 나는 그것을 고치는 옵션을 탐험했지만 그것을 만들 수 없었다. 다음은 제 코드입니다.TypeError : Chart.defaults.global.tooltips가 AngularJS에서 정의되지 않았습니다.

server.js

var express = require('/root/node_modules/express'); 
 
var mongojs = require('/root/node_modules/mongojs'); 
 
var d3 = require('/root/node_modules/d3'); 
 
var morgan = require('/root/node_modules/morgan');    // log requests to the console (express4) 
 
var bodyParser = require('/root/node_modules/body-parser'); // pull information from HTML POST (express4) 
 
var methodOverride = require('/root/node_modules/method-override'); 
 

 
var db = mongojs('migration', ['hadoop_s3_mig']); 
 

 
var app = express(); 
 
//var search = require('./search.js') 
 

 
//app.use(express.static(__dirname + '/views')); 
 
app.use(express.static(__dirname + '/public'));     // set the static files location /public/img will be /img for users 
 
app.use(morgan('dev'));           // log every request to the console 
 
app.use(bodyParser.urlencoded({'extended':'true'}));   // parse application/x-www-form-urlencoded 
 
app.use(bodyParser.json());          // parse application/json 
 
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json 
 
app.use(methodOverride()); 
 

 
app.get('/home', function(req,res) { 
 
     console.log("I received a GET request in/dir"); 
 
     db.hadoop_s3_mig.find(function (err, docs) { 
 

 
     var filtered_data = docs.filter(function (el) { return el.status == 'N'; }); 
 
     var occurences = d3.nest() 
 
       .key(function(d) { return d.platformName; }) 
 
       .rollup(function(leaves) { return leaves.length; }) 
 
       .entries(filtered_data); 
 

 
     console.log(filtered_data); 
 
     console.log(occurences); 
 
     res.json([filtered_data, occurences]); 
 

 
     }); 
 

 
}); 
 

 
app.get('*', function(req, res) { 
 
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end) 
 
}); 
 

 
var portNumber = 3002; 
 
app.listen(portNumber); 
 
console.log('Server Running on port ' + portNumber);
<!-- HTML File (./public/index.html) --> 
 

 
<html> 
 

 
    <head> 
 
     <title>Angular JS Views</title> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
 

 
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script> 
 
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script> 
 

 
    </head> 
 

 
    <body> 
 

 
     <div ng-app = "mainApp"> 
 

 
       <nav class="navbar" style="background-color: #b2cade;> 
 
         <a class="collapse navbar-collapse" href="#"> 
 
         <ul class="nav navbar-nav"> 
 
           <li><img src="hadoop.jpg" width="100px" height="100px"></li> 
 
           <li><img src="AWS_S3.png" width="100" height="100"></li> 
 
         </ul> 
 
         <h1 align="center"> Angular JS </h1> 
 
         </a> 
 
       </nav> 
 
       <nav class="navbar navbar-light" style="background-color: #ff8080;"> 
 
         <div class="container-fluid"> 
 
           <ul class="nav navbar-nav"> 
 
             <li><a href="#home"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
 
             <li><a href="#technical"><span class="glyphicon glyphicon-tasks"> 
 
                 </span> Technical DataSet Status </a></li> 
 
             <li><a href="#business"><span class="glyphicon glyphicon-briefcase"> 
 
               </span> Business DataSet Status </a></li> 
 
           </ul> 
 
         </div> 
 
       </nav> 
 

 

 
     <div ng-view></div> 
 

 
     <script type = "text/ng-template" id = "home.htm"> 
 
      <h2> Platform and File Names</h2> 
 

 
      <div class="container"> 
 
         <table class="table"> 
 
           <thead> 
 
             <tr> 
 
             <th>Platform Name</th> 
 
             <th>File Name</th> 
 
             </tr> 
 
           </thead> 
 
           <tbody> 
 
             <tr ng-repeat="filtered_data in filtered_data"> 
 
               <td>{{filtered_data.platformName}}</td> 
 
               <td>{{filtered_data.name}}</td> 
 

 
             </tr> 
 
           </tbody> 
 
         </table> 
 
       </div> 
 
     </script> 
 

 
     <script type = "text/ng-template" id = "technical.htm"> 
 
      <h2> File Count based on Platform Name</h2> 
 
      {{message}} 
 

 
      <canvas id="bar" class="chart chart-bar" 
 
       chart-data="data" chart-labels="labels"> chart-series="series" 
 
      </canvas> 
 
      </script> 
 

 
     <script type = "text/ng-template" id = "business.htm"> 
 
      <h2> Business DataSets</h2> 
 
      {{message}} 
 
     </script> 
 
     </div> 
 

 
     <script> 
 

 
var mainApp = angular.module("mainApp", ["ngRoute", "chart.js"]); 
 
//var angular = require('/root/node_modules/angular'); 
 
//var mainApp = angular.module('mainApp', ['ngRoute']); 
 
     mainApp.config(['$routeProvider', function($routeProvider) { 
 
      $routeProvider. 
 

 
      when('/home', { 
 
       templateUrl: 'home.htm', 
 
       controller: 'HomeController' 
 
      }). 
 

 
      when('/technical', { 
 
       templateUrl: 'technical.htm', 
 
       controller: 'TechnicalController' 
 
      }). 
 
      when('/business', { 
 
       templateUrl: 'business.htm', 
 
       controller: 'BusinessController' 
 
      }). 
 

 
      otherwise({ 
 
       redirectTo: '/home' 
 
      }); 
 
     }]); 
 

 
     mainApp.controller('HomeController', function($scope, $http) { 
 
      $http.get('/home').success(function (response) { 
 
       console.log("I got the data requested"); 
 
       $scope.filtered_data = response[0]; 
 
       $scope.occurences = response[1]; 
 
      }); 
 

 
     }); 
 

 
     mainApp.controller('TechnicalController', function($scope) { 
 
      $scope.message = "New Technical Controller"; 
 

 
       $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; 
 
       $scope.series = ['Series A', 'Series B']; 
 
       $scope.data = [ 
 
       [65, 59, 80, 81, 56, 55, 40], 
 
       [28, 48, 40, 19, 86, 27, 90] 
 
       ]; 
 
     }); 
 

 
     mainApp.controller('BusinessController', function($scope) { 
 
      $scope.message = "New Business Controller"; 
 
     }); 
 

 
</script> 
 

 
    </body> 
 
</html>

문제를 해결하기 위해 도와주세요.

감사 Gowthaman J 저도 같은 문제로 실행

답변

0

... 나는 두 각도 및 차트 JS의 버전과의 무언가를 가정합니다. docs에서 AngularJS (최소 1.4.x 이상 필요)Chart.js (Chart.js 2.x 필요)을 사용하는 것이 좋습니다. 1.6.6으로 Angular를 업데이트 할 때까지 Anguar 1.6.4 및 2.6s 차트와 같은 문제는 없었습니다. 그러나 당신이 가진 오류는 버전 2 이하의 chartJs를 사용하는 것입니다. 제 1.6.6 각도와 다른 오류가 발생합니다 ... 즉

TypeError: arcOpts is undefined 
관련 문제