Question

我使用angular-chart.js http://jtblin.github.io/angular-chart.js/在我的单页应用中获得了一个关于我的观点的图表。问题是视图初始化时不会加载图表，因为数据尚未通过工厂中的API加载。无论我在这个视图上停留多久，数据都不会填充。但是，如果我在单页应用程序上转到不同的视图，然后返回，那么数据就在那里，因为它已经在工厂中加载了。

我的理解是，一旦数据从工厂加载，图表应该因数据绑定而立即更新，但为什么不在第一个视图上执行此操作？

工厂（通过service.getChartData()加载数据的地方）

app.factory('chartFactory', ['$http', function($http) {

  var service = {
    height_chart: window.innerHeight * 0.4,
    labels: [],
    series: ['GDAX Value'],
    data: [],
    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
        }]
      }
    },
    getChartData: function() {
      $http.get('/portfolio/get-chart-data')
        .then(function(response) {
          service.labels = response.data[0]
          service.data = response.data[1]
        })
    }
  }

  return service

}])

控制器

app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']

function chartCtrl($scope, $interval, chartFactory) {

  var vmChart = this
  
  vmChart.height_chart = chartFactory.height_chart
  vmChart.labels = chartFactory.labels
  vmChart.series = chartFactory.series
  //this data hasn't loaded yet. 
  vmChart.data = [chartFactory.data]
  vmChart.onClick = function(points, evt) {
    console.log(points, evt)
  }
  vmChart.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }]
  vmChart.options = chartFactory.options


  chartFactory.getChartData()
  //the chart never shows up on the first view, even after the function loads the data in the factory.

}

<div ng-controller="chartCtrl as vmChart" class="chart-container">
  <canvas id="line" class="chart chart-line" chart-data="vmChart.data" chart-labels="vmChart.labels" chart-series="vmChart.series" chart-options="vmChart.options" chart-dataset-override="vmChart.datasetOverride" chart-click="vmChart.onClick" style="width:100%;">
    </canvas>
</div>

只是为了澄清 - 图表确实加载了，但直到我切换到另一个视图然后再回来。如何让图表加载。数据在工厂加载后的第一个视图？

Answer 1

http请求大约需要200毫秒来获取数据，但是DOM在请求完成之前就已加载。因此，当您首次登陆页面时，会填充图表数据，但仅在加载整个页面之后。

尝试一下：使getChartData函数“ async”并在http请求中添加“ await”，以告知DOM等待请求完成。

在图表工厂中：

getChartData: async function() {
     await $http.get('/portfolio/get-chart-data')
        .then(function(response) {
          service.labels = response.data[0]
          service.data = response.data[1]
        })
    }

Answer 2

请在vm声明后添加chartFactory.getChartData（），如下所示 -

app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']

function chartCtrl($scope, $interval, chartFactory) {

  var vmChart = this
  chartFactory.getChartData()

  vmChart.height_chart = chartFactory.height_chart
  vmChart.labels = chartFactory.labels
  vmChart.series = chartFactory.series
  //this data hasn't loaded yet. 
  vmChart.data = [chartFactory.data]
  vmChart.onClick = function(points, evt) {
    console.log(points, evt)
  }
  vmChart.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }]
  vmChart.options = chartFactory.options



  //the chart never shows up on the first view, even after the function loads the data in the factory.

}

范围变量未在页面加载AngularJS上加载

2 个答案: