我在网页中遇到错误“TypeError：Chart.defaults.global.tooltips is undefined”。我已经探索了修复它的选项，但无法实现。 以下是我的代码。
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 :(得分：2)
我遇到了同样的问题...... 我想它的角度和图表js的版本。从docs建议使用 AngularJS（需要至少1.4.x）和 Chart.js（需要Chart.js 2.x）。我对Anguar 1.6.4和图表js 2.6.0没有这样的问题，直到我将Angular更新为1.6.6。但是你得到的错误是使用低于版本2的chartJs。对于我，我得到一个角度为1.6.6的不同错误...即
TypeError: arcOpts is undefined