Highcharts verileri açısal yönergeyi kullanarak yüklenmeyecek

Question

Çift bağlamanın avantajından yararlanmak için yüksek grafikler açısal olarak kullanmaya çalışıyorum. Verileri işlerken bir sorun yaşıyorum, grafik çalışıyor ancak veriler tabloda görünmüyor. DOM konsolunu kontrol ettiğimde diziyi bulabilirim ama bazı sebeplerden dolayı grafikte görünmüyor.

cpvmPartners = []; 
cpvmPlannedCpm = []; 
actualCpm = []; 
graphData = []; 
cpvm = []; 
plannedPrepared = []; 

getData = function(){ 
    $.getJSON('/cpvmdata', function(data) { 
     for(k in data){ 
      if(data[k]['audience'] == 'GCM'){ 
       graphData.push([data[k]['partner'],data[k]['plannedcpm']]) 
       actualCpm.push(Math.round((data[k]['mediacost']/data[k]['impressions']*1000))) 
       cpvmPlannedCpm.push(data[k]['plannedcpm']) 
       cpvmPartners.push(data[k]['partner']) 
      } 
     } 
    }); 
} 

prepareData = function(){ 
    for(var i = 0; i < actualCpm.length; i++) { 
     actualPrepared.push({name: "CPM", data: actualCpm[i]}) 
     plannedPrepared.push({name: "Planned CPM", data: cpvmPlannedCpm[i]}) 
    } 
} 

myApp = angular.module('main', ['highcharts-ng']); 

myApp.controller('graphController', function ($scope) { 
    getData(); 
    prepareData(); 
    $scope.highchartsNG = { 
     options: { 
     chart: { 
      type: 'bar' 
     } 
    }, 
    series: [{ 
     data: actualCpm 
    }], 
    title: { 
     text: 'Hello' 
    }, 
    loading: false 
    } 
}); 

Answer 1

Yani açısal denetleyicisi aramak getData() fonksiyon eşzamansızsa: Veri aldık zamana , zaten verilerinizi görebilirsiniz yüzden bu $scope.highChartNg

için grafiğinizi yaptık konsol ancak aslında açısal olarak actualCpm ayarlamaz. Bunu düzeltmek için bu kadar sevdiği $.getJSON fonksiyonu İÇİNDE grafik oluşturmak gerekir:

var options = { 
    chart: { 
     renderTo: 'container', 
     type: 'spline' 
    }, 
    series: [{}] 
}; 

$.getJSON('data.json', function(data) { 
    options.series[0].data = data; 
    var chart = new Highcharts.Chart(options); 
}); 

Burada daha fazlasını görebilirsiniz: Daha kolay http://www.highcharts.com/docs/working-with-data/custom-preprocessing

Answer 2

sadece

$ http.get

kullanmak

Köşeli hizmet.

Karıştırma jQuery ve Angular, kapsam belirleme için zahmetlidir.

$http.get('cpvmdata') 
.then(function(response){ 
    $scope.output = response.data; 
    for(k in $scope.output){ 
     if($scope.output[k]['audience'] == 'GCM'){ 
      $scope.planned.push($scope.output[k]['plannedcpm']) 
      $scope.partners.push($scope.output[k]['partner']) 
      $scope.cpm.push(Math.round(($scope.output[k]['mediacost']/$scope.output[k]['impressions']*1000))) 
     } 
    } 
});