ハイチャートデータは角度指示を使用して読み込まれません

Question

ダブルバインディングを利用するには、角度でハイチャートを使用しようとしています。データのレンダリングに問題がありますが、グラフは機能しますが、データはグラフに表示されません。 DOMコンソールをチェックすると、配列を取得できますが、何らかの理由でグラフに表示されません。

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

ですから、角度コントローラに呼び出すgetData()関数は非同期です：あなたはデータを得ている時間によって 、あなたはすでに、あなたのデータを見ることができる理由であること$scope.highChartNg

であなたのチャートを作りましたコンソールが実際には角度が設定されるまでにはactualCpmに設定されていません。この問題を解決するには、そのようなあなたの$.getJSON機能でグラフを作成する必要があります。

は

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

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

あなたがここに詳細を参照することができます簡単http://www.highcharts.com/docs/working-with-data/custom-preprocessing

Answer 2

がちょうど

$ http.get

を使用します

角度サービス。

jQueryとAngularを混合すると、スコープが煩雑になります。

$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))) 
     } 
    } 
});