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使用了一些角度包装器，但如果没有，你可能在ajax调用完成之前调用了var chart = AmCharts.makeChart（...）而你忘了调用图表.validateData（）;后？

如果您在此处发布与此问题相关的完整代码，将会有很大帮助

修改

您似乎使用GrantMStevens/amCharts-Angular。

使用documentation中提到的技术：＆＃39;基于承诺的图表呈现＆＃39;解析异步中的数据：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;
};

在ajax调用后，Am Chart不会加载图表

1 个答案: