Question

我正在向rethinkdb数据库发出请求，获取信息并对其进行一些操作，以便我获得所需的信息，然后使用数据填充折线图。我正在使用angular-chart.js指令，我的问题是我需要在数据操作完成后基本上重新渲染图表。有没有办法让我可以用观察者做到这一点？

  $scope.things = [];
  $scope.chartData = ChartService.getAll();
  setTimeout(function() {
    var length = $scope.chartData.$$state.value.data.length;
    for (var i = 0; i < length; i++) {
      $scope.things[i] = angular.copy($scope.chartData.$$state.value.data[i].State);
    }
    console.log("Things: " + $scope.things);
    var object = {};
    var array = $scope.things;
    for (var i = 0, j = array.length; i < j; i++) {
      object[array[i]] = (object[array[i]] || 0) + 1;
    }
    console.log("Object: " + JSON.stringify(object));
    $scope.labels = [object];
    console.log("Labels: " + $scope.labels);
  }, 2000);

所以我创建一个空数组，然后调用我的服务并将数据推回到数组中。然后我在它上面运行一个for循环，将每个数组元素的数量（在这种情况下我得到不同的状态缩写）添加到一个对象。该对象看起来像{“AZ”：1，“OH”：5等......}。基本上我需要图表在这一点上用新数据重新渲染。我认为观察者会是答案，但欢迎提出任何建议。谢谢！

Answer 1

我会让ChartService返回一个承诺。这将使您在获取数据后进行操作/渲染。

var app = angular.module('plunker', []);

app.controller('ChartController', function($scope, ChartService) {
  ChartService.getAll().success(function(chartData) {
    $scope.chartData = chartData;
    // do you data manipulations here
    // call your chart renderer here
  });
});

app.factory("ChartService", function($http) {
  var service = {};

  service.getAll = function() {
    return $http.get("api/states").success(function(states) {
      // do some stuff
    })
  }

  return service;
})

注意angular-chart.js的变化？

1 个答案: