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

Question

我正在使用 amcharts 作为自定义指令。现在我想使用 web 服务从 $http.get 服务的输出中获取这个 AmChart 的 dataProvider。

但我无法将其动态分配给 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           
            }
        }]) ;

Answer 1

假设您的 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
        });
      }
    }]
} );

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

Unable to show JSON data injected using service inside the amchart directive dataprovider

amcharts

angularjs

angularjs-directive

angularjs-scope