Question

我正在尝试使用amChart中的AngularJS Directive制作图表。它适用于硬编码数据但是当我试图改变它从json文件显示数据的方式时，它根本不起作用。但是当我console.log我想要获得的数据时，我收到了json data我的预期，但图表再次没有呈现/显示数据。

CHARTS.DIRECTIVE.JS

(function(){
"use strict";

var myApp = angular.module('testchart', []);

myApp.directive('test', ['$http',
function($http){
    return {
        restrict: 'AE',
        replace: true,
        template: '<div id="testchart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
        link: function(scope, element, attrs){
            var chart = false;
            var data = [];



            function generateChartData() {


                $http.get('http://localhost:81/......./testdata.json')
                    .then(function(req, res) {
                    var data = req.data;
                    //return data;
                    console.log(data); 
                });
            }    

            generateChartData();

            var initChart = function() {
              if (chart) chart.destroy();
              var config = scope.config || {};
               chart = AmCharts.makeChart("testchart", {
            "type": "serial",
            "theme": "none",
            "marginLeft": 20,
            "pathToImages": "vendor/amchart/images",
            "dataProvider": data,
            "valueAxes": [{
                "axisAlpha": 0,
                "inside": true,
                "position": "left",
                "ignoreAxisWidth": true
            }],
            "graphs": [{
                "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
                "bullet": "round",
                "bulletSize": 6,
                "lineColor": "#d1655d",
                "lineThickness": 2,
                "negativeLineColor": "#637bb6",
                "type": "smoothedLine",
                "valueField": "value"
            }],
            "chartScrollbar": {},
            "chartCursor": {
                "categoryBalloonDateFormat": "YYYY",
                "cursorAlpha": 0,
                "cursorPosition": "mouse"
            },
            "dataDateFormat": "YYYY",
            "categoryField": "year",
            "categoryAxis": {
                "minPeriod": "YYYY",
                "parseDates": true,
                "minorGridAlpha": 0.1,
                "minorGridEnabled": true
            }
        });

        initChart();

            };


       }   

    }
}]);

})();

如果数据在图表中是硬编码的，那么它的效果非常好。 console.log返回预期的json数据。

我不知道该怎么办，我已经有好几天试图解决这个问题了。

修改/更新（2）：

我得到了它的工作，但以其他方式，但它做了我想做的事情。但我不知道这是否是一种正确的方法。

更新了Plnkr link to my work

AngularJS指令中amChart的动态数据

0 个答案: