尝试从HTTP请求中获取数据以填充角度chartjs图

时间:2016-01-03 20:52:19

标签: angularjs http scope controller chart.js

这是我的控制器:

(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调用和填充图表函数显示它。

非常感谢任何帮助。

0 个答案:

没有答案