2017-01-09 19 views
0

我通過調用ajax調用將數據傳遞給圖表從API獲取數據。 我無法呈現圖表。任何人都可以建議我可能是什麼問題?Am Chart在ajax調用後不加載圖表

這是我的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(); 

    }); 
+1

發佈您的代碼在這裏 – Sajeetharan

+0

我已經更新代碼。我也使用了異步調用。但不能使用。 – user3335796

回答

0

如果您使用amCharts與否某些角度包裝你沒有提到的,但如果沒有,也許你叫無功表= AmCharts.makeChart(。 ..)在ajax調用完成之前,你忘記調用chart.validateData();後?

將極大地幫助,如果你將在這裏發佈與此相關的問題

編輯

這是一些完整的代碼看起來你使用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; 
}; 
+0

我做了這樣的事情 – user3335796

+0

我已經更新了我正在嘗試做的事情,並且我還給出了鏈接,您可以在其中找到它的指令和相應的JS文件 – user3335796