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

Angular服务。

混合使用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)))
        }
    }
});

使用angular指令不会加载Highcharts数据

2 个答案: