ajax呼び出し後にチャートがロードされない

Question

ajaxコールを作成してAPIからデータを取得し、このデータをチャートに渡します。 グラフをレンダリングできません。誰かが私に何か問題を示唆することはできますか？

これは私のAJAX呼び出し

あなたは私がスコープ変数にプッシュしようとチャートに追加しようとしていますAJAX呼び出しの後に見ることができます。参照用

http://jsfiddle.net/w3vpc35o/41/

angular.module('amChartsDirectiveExample', ['amChartsDirective']).controller('amChartsController', function ($scope) { 
$scope.call = function(){ 
    $http({ 
      method: "get", 
      global: false, 
      async: true, 
      url: "server/test.php 
     }). 
     success(function(data) { 
     /*Assume data like like [{ 
     year: 2005, 
     income: 23.5, 
     expenses: 18.1 
    }, { 
     year: 2006, 
     income: 26.2, 
     expenses: 22.8 
    }, { 
     year: 2007, 
     income: 30.1, 
     expenses: 23.9 
    }, { 
     year: 2008, 
     income: 29.5, 
     expenses: 25.1 
    }, { 
     year: 2009, 
     income: 24.6, 
     expenses: 25 
    }]*/ 
    $scope.rest = data 
    $scope.amChartOptions = { 
    data:$scope.res , 
    type: "serial", 
    theme: 'black', 
    categoryField: "year", 
    rotate: true, 
    pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/', 
    legend: { 
     enabled: true 
    }, 
    chartScrollbar: { 
     enabled: true, 
    }, 
    categoryAxis: { 
     gridPosition: "start", 
     parseDates: false 
    }, 
    valueAxes: [{ 
     position: "top", 
     title: "Million USD" 
    }], 
    graphs: [{ 
     type: "column", 
     title: "Income", 
     valueField: "income", 
     fillAlphas: 1, 
    }] 
} 
    }); 
} 


$scope.call(); 

    }); 

Answer 1

このリンクで見つけてくださいあなたには、いくつかの角度ラッパーamChartsのためかを使用する場合には言及しなかったが、ない場合は、多分あなたは（VARチャート= AmCharts.makeChartと呼ばれます。 ..）ajax呼び出しが完了し、chart.validateData（）を呼び出すのを忘れてしまった。後？あなたはここで、この問題に関連するいくつかの完全なコードをポストする場合

が大幅に役立つことがあります

EDIT

は、あなたがGrantMStevens/amCharts-Angularを使用しているようです。非同期でデータを解決するために「約束ベースのチャートのレンダリング」：

はdocumentationで述べた技術を使用して一般的にhttp://jsfiddle.net/w3vpc35o/83/

、あなたが何をする必要があるか、このようなChartOptionsを作成することです：

this.amChartOptions = $timeout(function(){ 
     return { 
      data: this.dataFromPromise(), 
      type: "serial", 
... 
}.bind(this), 1000) 

と、このようなものを使用して非同期でデータをフェッチ：

this.dataFromPromise = function(){ 
    var deferred = $q.defer(); 

    $http({ 
     method : "GET", 
     url : "/server/endpoint" 
    }).then(function mySucces(response) { 
     deferred.resolve(response); 
    }); 

    return deferred.promise; 
};