Angularjs 无法在amchart指令数据提供程序内显示使用服务注入的JSON数据

我使用amcharts作为自定义指令。现在我想使用webservices从$http.get服务的输出中获取这个AmChart的数据提供者

但我无法将此动态分配给amChart的数据提供程序

var app=angular.module('mainApp',[]);

        app.service('dataProviderService',function($http){
            this.getData= function(){
                return $http.get('jaxrs/WebService/getJSONData');
            };
        });

        app.directive('myChart',['dataProviderService',function (dataProviderService) { 
            return {
                restrict: 'E',
                replace:true,       
                template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
                link: function (scope, element, attrs) {
                    scope.data={};
                    dataProviderService.getData().then(function(response){
                        scope.data=response.data;
                    },function(error){
                        scope.status="Show error";
                    });
                    var chart = false;
                    var initChart = function() {
                        if (chart) chart.destroy();
                        var config = scope.config || {};
                        chart = AmCharts.makeChart( "chartdiv", {
                            "theme": "none",
                            "type": "serial",
                            "dataProvider": dataProviderService.newData(),
                            "categoryField": "OT",
                            "depth3D": 20,
                            "angle": 30,

                            "categoryAxis": {
                                "labelRotation": 90,
                                "gridPosition": "start"
                            },

                            "valueAxes": [ {
                                "title": "availability"
                            } ],

                            "graphs": [ {
                                "valueField": "availability",
                                "colorField": "color",
                                "type": "column",
                                "lineAlpha": 0.1,
                                "fillAlphas": 1
                            } ],

                            "chartCursor": {
                                "cursorAlpha": 0,
                                "zoomable": false,
                                "categoryBalloonEnabled": false
                            },

                            "export": {
                                "enabled": true
                            }
                        } );


                    };
                    initChart();

                }//end watch           
            }
        }]) ;

var-app=angular.module（'mainApp'，[]）；
app.service（'dataProviderService'，函数（$http）{
this.getData=function（）{
返回$http.get（'jaxrs/WebService/getJSONData'）；
};
});
应用程序指令（'myChart'，['dataProviderService'，函数（dataProviderService）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
scope.data={}；
dataProviderService.getData（）.then（函数（响应）{
scope.data=response.data；
}，函数（错误）{
scope.status=“显示错误”；
});
var图=假；
var initChart=函数（）{
if（chart）chart.destroy（）；
var config=scope.config | |{}；
chart=AmCharts.makeChart（“chartdiv”{
“主题”：“无”，
“类型”：“串行”，
“dataProvider”：dataProviderService.newData（），
“类别字段”：“OT”，
“深度3D”：20，
“角度”：30，
“分类法”：{
“唇瓣旋转”：90，
“网格位置”：“开始”
},
“valueAxes”：[{
“标题”：“可用性”
} ],
“图表”：[{
“valueField”：“可用性”，
“颜色字段”：“颜色”，
“类型”：“列”，
“lineAlpha”：0.1，
“填充字母”：1
} ],
“图表光标”：{
“cursorAlpha”：0，
“可缩放”：错误，
“CategoryBallooneEnabled”：false
},
“出口”：{
“已启用”：真
}
} );
};
initChart（）；
}//了望台
}
}]) ;

假设您的

newData（）

方法是一个异步的

$http.get（）

请求，就像您的

getData（）

方法一样，您需要在请求自行解析后调用makeChart，或者在请求自行解析时调用

validateData（）

来告诉图表重新绘制自己。下面是在图表的

init

事件中执行此操作的示例：

chart = AmCharts.makeChart( "chartdiv", {
    // ... omitted ...
    "dataProvider": [],
    // ... omitted ...
    "listeners": [{
      "event": "init",
      "method": function(e) {
         dataProviderService.newData().then(function(response) {
           e.chart.dataProvider = response;
           e.chart.validateData();
        }, function(error) {
           // do something else
        });
      }
    }]
} );

---

假设您的

newData（）

方法是一个异步

$http.get（）

请求，就像您的

getData（）

方法一样，您需要在请求自行解析后调用makeChart，或者在请求自行解析时通过调用

validateData（）

通知图表重新绘制。下面是在图表的

init

事件中执行此操作的示例：

chart = AmCharts.makeChart( "chartdiv", {
    // ... omitted ...
    "dataProvider": [],
    // ... omitted ...
    "listeners": [{
      "event": "init",
      "method": function(e) {
         dataProviderService.newData().then(function(response) {
           e.chart.dataProvider = response;
           e.chart.validateData();
        }, function(error) {
           // do something else
        });
      }
    }]
} );

---

dataProviderService.newData（）是打字错误吗？没有
newData（）
定义。是gerric。。。dataProviderService.newData（）是一个打字错误。。。我打算使用scope.data作为图表的数据提供程序。
dataProviderService.newData（）
a打字错误吗？没有
newData（）
定义。是gerric。。。dataProviderService.newData（）是一个打字错误。。。我打算使用scope.data作为图表的数据提供程序。