Диаграмма Морриса с угловыми и динамическими данными

Question

Диаграмма Морриса с угловыми и динамическими данными

0

Мне нужна диаграмма области с использованием угловой директивы, и данные извлекаются из базы данных, но проблема заключается в том, что после извлечения данных диаграмма не появляется, и когда я использую статическую диаграмму данных, она выглядит нормально. А график обновится через 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

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

User101 21 апр. 2016, в 23:06

Источник

0

И нет проблем в файле фабрики данных. Ответ HTTP-запроса работает, и формат ответа - [объект, объект и т. Д.], А после функции JSON.stringify (data) формат данных: [{"id": 21, "yr ": 2000," value ": 80}, {" id ": 1," yr ": 2001," value ": 5}, {" id ": 2," yr ": 2002," value ": 6} , {"id": 3, "yr": 2003, "value": 17} и т. д.];
User101 21 апр. 2016, в 20:42

Теги:

angularjs

charts

1 ответ

Ещё вопросы

И нет проблем в файле фабрики данных. Ответ HTTP-запроса работает, и формат ответа - [объект, объект и т. Д.], А после функции JSON.stringify (data) формат данных: [{"id": 21, "yr ": 2000," value ": 80}, {" id ": 1," yr ": 2001," value ": 5}, {" id ": 2," yr ": 2002," value ": 6} , {"id": 3, "yr": 2003, "value": 17} и т. д.];

Devidas Kadam · Answer 1 · 2016-04-21T18-16-00.000Z

попробуйте этот $scope.myModel=JSON.parse(data); insted of $scope.myModel=JSON.stringify(data);

Я использовал это, но решить проблему.
если я заменит $ scope.myModel = JSON.stringify (data) на $ scope.myModel = [{"id": 21, "yr": 2000, "value": 80}, {"id": 1, "yr ": 2001," значение ": 5}, {" id ": 2," год ": 2002," значение ": 6}, {" идентификатор ": 3," год ": 2003," значение ": 17} ,скоро]; это не работает..