Как создать директиву в Angular JS для графа Morris JS

Я пытаюсь создать граф, используя Morris JS, создав директиву Angular JS. Моя директива код:Как создать директиву в Angular JS для графа Morris JS

Reporting.directive('morrisLine', function(){ 
    return { 
    restrict: 'EA', 
    template: '<div id="call-chart">test2</div>', 
    scope: { 
     data: '=', //list of data object to use for graph 
     xkey: '=', 
     ykey: '=' 
    }, 
    link: function(scope,element,attrs){ 
     new Morris.Line({ 
      element: element, 
      data: [ 
       { year: '2008', value: 20 }, 
       { year: '2009', value: 10 }, 
       { year: '2010', value: 5 }, 
       { year: '2011', value: 5 }, 
       { year: '2012', value: 20 } 
       ], 
      xkey: '{year}', 
      ykey: ['value'], 
     }); 
    } 
    }; 
});

Код ошибки я получаю, когда я проверить консоль на моем браузере:

TypeError: Cannot call method 'match' of undefined 
    at Object.t.parseDate (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:9523) 
    at n.eval (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3297) 
    at n.t.Grid.r.setData (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3888) 
    at n.r (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:1680) 
    at new n (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:11953) 
    at link (http://127.0.0.1:8000/static/js/app/directives/directives.js:94:20) 
    at j (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:43:157) 
    at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:463) 
    at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) 
    at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) <div morris-line="" class="ng-isolate-scope ng-scope" style="position: relative;">

Часть код ошибки указывает на часть, которая говорит

element : element,

Я новичок в Angular JS и директивах, и я надеюсь, что кто-то может указать мне в правильном направлении, как справиться с этой проблемой. Спасибо!

источник

2013-12-02 Andy Hadjigeorgiou

ошибку начисленного потому что элемент является undefiend Пожалуйста, вы можете дать нам ссылка на библиотеку директивы, пожалуйста, – Sora

эй я написал для этого директиву, делая диаграммы morris с угловыми: https://github.com/jasonshark/ng-morris/blob/ma ster/src/ngMorris.js Он также доступен через bower: 'bower install ngmorris --save' –

вот как я сделал с диаграммой morris. Примером может служить шкальный:

sampleApp.directive('barchart', function() { 

    return { 

     // required to make it work as an element 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     // observe and manipulate the DOM 
     link: function($scope, element, attrs) { 

      var data = $scope[attrs.data], 
       xkey = $scope[attrs.xkey], 
       ykeys= $scope[attrs.ykeys], 
       labels= $scope[attrs.labels]; 

      Morris.Bar({ 
        element: element, 
        data: data, 
        xkey: xkey, 
        ykeys: ykeys, 
        labels: labels 
       }); 
     } 

    }; 

});

, то вы можете использовать его с этим элементом:

<barchart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></barchart>

где MyModel является массив данных будет проходить в директиве, он должен иметь правильный формат, чтобы быть совместимым с Моррис. внимательно ознакомьтесь с тем, как этот объект проходит в функции «ссылка» в директиве.

Вот рабочий и полный пример: http://jsbin.com/ayUgOYuY/5/edit?html,js,output

источник

2014-01-01 13:47:59 Darryldecode

Не может ли быть, что наблюдение работает неправильно в этом примере? –

@AxelFontaine: Привет, Что вы имеете в виду, что наблюдение работает неправильно? Мы все еще можем просто удалить наблюдатель в коде и просто разместить экземпляр Morris вне функции. Он по-прежнему работает. ИМХО, Лучшее использование наблюдения для наблюдения за изменениями данных со временем. в основном в живых обновлениях. – Darryldecode

отредактировал пример без использования наблюдения – Darryldecode

Вам просто нужно изменить

xkey: '{year}', 
ykey: ['value'],

xkey: 'year', 
ykeys: ['value'],

источник

2014-09-16 01:27:23

Как создать директиву в Angular JS для графа Morris JS

ответ

Смежные вопросы