Question

我使用amcharts作为自定义指令。现在我想使用webservices从$ 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，或者通过调用{告诉图表重绘自己{1}}当请求自行解决时。以下是在图表的validateData()事件中执行此操作的示例：

init

无法显示使用amchart指令dataprovider中的服务注入的JSON数据

1 个答案: