这是我的控制器:
(function() {
'use strict';
angular
.module('ideabank')
.controller('ProfileController', ProfileController);
ProfileController.$inject = ['$http', '$scope'];
function ProfileController($http, $scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novemeber", "December"];
$scope.getProfile = getProfile;
function getProfile() {
$http
.get("http://localhost:3000/profile")
.then(function (response) {
var profileData = populateChart(response.data.pastIdeas);
$scope.data = [];
$scope.data.push(profileData);
console.log($scope.data);
});
}
function populateChart(pastIdeas) {
console.log(pastIdeas);
var amounts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for(var i=0; i < pastIdeas.length; i++) {
var ideaDate = new Date(pastIdeas[i].date);
var month = ideaDate.getMonth();
console.log(month);
if(month === 0){
amounts[0] = 1 + amounts[0];
console.log(amounts);
}
amounts[5] = 10;
return amounts;
}
}
}
})();
以下是图表的HTML:
<div ng-controller="ProfileController">
<canvas id="radar" class="chart chart-radar"
chart-data="data" chart-labels="labels">
</canvas>
</div>
以下是按钮的HTML,用户可以转到他们的个人资料:
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Idea Bank</a>
<ul class="right hide-on-med-and-down" ng- controller="ProfileController">
<!-- Dropdown Trigger -->
<li ng-if="vm.loggedIn"><a ui-sref='profile' ng-click="getProfile()">Profile</a></li>
<li><a ng-if="!vm.loggedIn" ng-click="vm.showModal()">Create or Login</a></li>
</ul>
</div>
这是一个快速细分。当用户单击配置文件按钮时,它应该将它们带到其配置文件并进行HTTP调用并将该特定用户数据填充到图表中。
但是,出于某种原因,我无法从HTTP调用中获取数据以正确填充图表。
如果我,只需在$ scope.labels下面手动输入图形数据。
例如。 $ scope.data = [[1,2,3,4,5,6]];
然后图表显示该数据。但我不能用http调用和填充图表函数显示它。
非常感谢任何帮助。