Question

我正在使用angular-chart.js在我的视图上绘制图表。它从mongodb获取数据。我有一个工厂设置使用API来获取数据，但是一旦数据更新，图表就不会更新，即使范围变量绑定到工厂服务对象。

chartFactory.js

＆＃13;

app.factory('chartFactory', ['$http', '$interval', function($http, $interval) {
  var service = {}
  service.chartData = [
    [0, 0, 0],
    [0, 0, 0],
    [0, 0, 0]
  ]

  getData()

  function getData() {
    $http.get('/portfolio/get-chart-data')
      .then(function(response) {
        service.chartData = response.data
        console.log(response.data, 'response data') //response.data is an array
      })
  }

  return service
}])

＆＃13;

这就是我定义范围变量的地方，这是数据图表的绘制。根据文档，图表应在范围变量更新时更新。也许我没有正确绑定？

chartController.js

＆＃13;

app.controller('chartCtrl', function($scope, $timeout, $http, chartFactory) {

      $scope.height_chart = window.innerHeight * 0.4
      $scope.labels = chartFactory.chartData[0];
      $scope.series = chartFactory.chartData['GDAX Value'];
      $scope.data = [ chartFactory.chartData[1] ];
      $scope.onClick = function(points, evt) {
        console.log(points, evt);
      };
      $scope.datasetOverride = [{
        yAxisID: 'y-axis-1'
      }];

      $scope.options = {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [{
            id: 'y-axis-1',
            //    type: 'linear',
            display: true,
            position: 'left',
            ticks: {
              beginAtZero: false,
              callback: function(value, index, values) {
                if (parseInt(value) >= 1000) {
                  return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                } else {
                  return '$' + value;
                }
              }
            }
          }],
          xAxes: [{
            display: false
          }]
        }
      }
})

＆＃13;

如何在工厂更新服务对象时更新图表？

Answer 1

您已经在工厂中公开了chartData，现在您可以向控制器添加$scope.chartData变量，直接引用工厂的chartData数组。

$scope.chartData = chartFactory.chartData;

现在你的控制器$scope中有一个引用chartData的变量，因此其中一个变量将反映在另一个变量中，两个变量现在引用相同的数组（对象）。

我不确定你是否需要重新渲染图表，但是快速阅读Angular Chart.js的文档它确实会自动更新，所以你应该没事。

所有图表都是被动的，并且会在数据时自动更新变化＆＃34;

工厂对象更改AngularJS

1 个答案: