Question

我需要一个使用angular指令的区域图表，数据是从数据库中提取的，但问题是在获取数据后，图表没有出现，当我使用静态数据图表时显示正常。图表将在10秒后更新，即我的要求。

 var myapp=angular.module('myapp',['ngRoute']);
        myapp.controller('GraphController',
        function(dataFactory,$scope,$http,$timeout){

            var getData=function() {
                dataFactory.httpRequest('/graph').then(function (data) {
                    console.log(JSON.stringify(data));
                    $scope.myModel=JSON.stringify(data);

                    $timeout(getData, 1000);

                });

            }
            $scope.xkey = 'id';
            $scope.ykeys = ['id',     'value'];
            $scope.labels = ['ID', 'Value'];
            $timeout(getData, 1000);


           /*  Static data and when these static data are use in getData function ,it didnot work.
           $scope.myModel = [
                        {"id":21,"yr":2000,"value":80},
                        {"id":1,"yr":2001,"value":5},
                        {"id":2,"yr":2002,"value":6},
                        {"id":3,"yr":2003,"value":17},
                        {"id":4,"yr":2004,"value":5},
                        {"id":5,"yr":2005,"value":22},{"id":7,"yr":2006,"value":41},
                        {"id":9,"yr":2007,"value":11},{"id":10,"yr":2008,"value":33},
                        {"id":8,"yr":2009,"value":77},{"id":6,"yr":2010,"value":55},
                        {"id":11,"yr":2011,"value":55},{"id":12,"yr":2012,"value":66},
                        {"id":13,"yr":2013,"value":77},{"id":14,"yr":2014,"value":50},
                        {"id":15,"yr":2015,"value":22},{"id":16,"yr":2016,"value":77},
                        {"id":17,"yr":2017,"value":41},{"id":18,"yr":2018,"value":20},
                        {"id":19,"yr":2019,"value":9},{"id":20,"yr":2020,"value":2},
                        {"id":23,"yr":2022,"value":1}
                    ];*/


        });

        myapp.directive('areachart',function(){ //directive name must be in small letters
            return {
                // required to make it work as an element
                restrict: 'E',
                template: '<div></div>',
                replace: true,
                link:function($scope,element,attrs)
                {
                    var data=$scope[attrs.data],
                        xkey=$scope[attrs.xkey],
                        ykeys=$scope[attrs.ykeys],
                        labels=$scope[attrs.labels];
                    Morris.Area({
                        element:element,//element means id #
                        data:data,
                        xkey:xkey,
                        ykeys:ykeys,
                        labels:labels,
                        parseTime: false,
                        ymax:120,//Max. bound for Y-values
                        lineColors: ['#0b62a4', '#D58665'],//Array containing colors for the series lines/points.
                        smooth: true,//Set to false to disable line smoothing.
                        hideHover: 'auto',//Set to false to always show a hover legend.
                        pointSize: 4,//Diameter of the series points, in pixels.s
                        axes:true,//Set to false to disable drawing the x and y axes.
                        resize: true,//Set to true to enable automatic resizing when the containing element resizes
                        fillOpacity:1.0,//Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque).
                        grid:true,//Set to false to disable drawing the horizontal grid lines.

                    });
                }
            }
        })

Html Page

<body ng-app="myapp">
        <div ng-controller="GraphController">
            <AreaChart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></AreaChart>
        </div>
</body>

Answer 1

Angularjs MVC。试试这个：

$scope.dt = angular.fromJson(sReturn.data);

为我工作。

Answer 2

试试这$scope.myModel=JSON.parse(data);

的$scope.myModel=JSON.stringify(data);内容

带有角度和动态数据的Morris图表

2 个答案: