使用图表js，并让它完成我需要的工作，这是从Web服务中提取数据并使用$interval进行更新。当我使用内置内置更新功能更新图表时，它会按预期再次显示，但也带有旧数据。我以为我正在清除阵列中的数据，我对角度更新了，所以也许我忽略了一些东西。
这是正在发生的事情的JS。
angular.module('myapp', [])
.controller('MainCtrl', function($scope, $http, $interval) {
$scope.doughnutData = [];
var myDoughnut = '';
onload = function() {
$http.get('https://api.myjson.com/bins/59zvx').success(function(returnedData) {
$scope.username = returnedData.name;
$scope.totalscore = returnedData.totalScore.toFixed(3);
returnedData.models.forEach(function(x) {
var score = x.score.toFixed(3);
console.debug(score);
if (score >= 75) {
$scope.doughnutData.push({
'value': x.score,
'color': '#F7464A',
'highlight': '#FF5A5E',
'label': x.name
});
} else if (score >= 50) {
$scope.doughnutData.push({
'value': x.score,
'color': '#FDB45C',
'highlight': '#FFC870',
'label': x.name
});
} else {
$scope.doughnutData.push({
'value': x.score,
'color': '#424242',
'highlight': '#686868',
'label': x.name
});
}
});
$scope.doughnutData = sortByKey($scope.doughnutData, 'value');
var ctx = document.getElementById("chart-area").getContext("2d");
myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
responsive: true
});
});
mainInterval = $interval(function() {
doughnutData = '';
$http.get('https://api.myjson.com/bins/59zvx').success(function(returnedData) {
$scope.username = returnedData.name;
$scope.totalscore = returnedData.totalScore.toFixed(3);
returnedData.models.forEach(function(x) {
var score = x.score.toFixed(3);
console.debug(score);
if (score >= 75) {
$scope.doughnutData.push({
'value': x.score,
'color': '#F7464A',
'highlight': '#FF5A5E',
'label': x.name
});
} else if (score >= 50) {
$scope.doughnutData.push({
'value': x.score,
'color': '#FDB45C',
'highlight': '#FFC870',
'label': x.name
});
} else {
$scope.doughnutData.push({
'value': x.score,
'color': '#424242',
'highlight': '#686868',
'label': x.name
});
}
});
$scope.doughnutData = sortByKey($scope.doughnutData, 'value');
myDoughnut.segments = doughnutData;
myDoughnut.update();
});
}, 5000);
$scope.$apply();
};
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key];
var y = b[key];
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
});
}
});
因此，它从9个值开始，当它更新它的18个值时。我当时认为$interval部分中的doughnutData = '';会清除它？
也想包括HTML，以更好地了解正在发生的事情：
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../Chart.js"></script>
<script src="../src/Chart.Doughnut.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="../script.js"></script>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<div id="canvas-holder">
<canvas id="chart-area" width="50" height="50"></canvas>
</div>
</body>
</html>
尝试更改MainInterval函数
doughnutData = '';
$scope.doughnutData = [];
在Angular中，您可以通过$ scope对象访问字段
mainInterval = $interval(function() {
$scope.doughnutData = [];
$http.get('https://api.myjson.com/bins/59zvx').success(function(returnedData) {
$scope.username = returnedData.name;
$scope.totalscore = returnedData.totalScore.toFixed(3);
returnedData.models.forEach(function(x) {
var score = x.score.toFixed(3);
console.debug(score);
if (score >= 75) {
$scope.doughnutData.push({
'value': x.score,
'color': '#F7464A',
'highlight': '#FF5A5E',
'label': x.name
});
} else if (score >= 50) {
$scope.doughnutData.push({
'value': x.score,
'color': '#FDB45C',
'highlight': '#FFC870',
'label': x.name
});
} else {
$scope.doughnutData.push({
'value': x.score,
'color': '#424242',
'highlight': '#686868',
'label': x.name
});
}
});
$scope.doughnutData = sortByKey($scope.doughnutData, 'value');
myDoughnut.segments = $scope.doughnutData;
myDoughnut.update();
});
}, 5000);