web-dev-qa-db-fra.com

Comment intégrer Flot avec AngularJS?

Angular et Flot sont nouveaux, mais je connais bien Jquery et Javascript. Je ne sais pas trop comment lier un graphique Flot à des modèles de données Angular, car Flot est un plugin JQuery. J'ai cherché partout, mais je n'ai pas trouvé d'exemple.

Je serais également ravi d’utiliser des tableaux à haute résolution, des graphiques Google ou toute autre solution de cartographie.

chartshighchartsangularjsflot
37
JBCP

Étant donné que les graphiques impliquent une manipulation intensive du DOM, les directives sont la voie à suivre. 

Les données peuvent être conservées dans le contrôleur

App.controller('Ctrl', function($scope) {
    $scope.data = [[[0, 1], [1, 5], [2, 2]]];
});

Et vous pouvez créer une balise HTML personnalisée 1 en spécifiant le modèle à partir duquel vous voulez obtenir des données

 <chart ng-model='data'></chart>

qui angulaire peut compiler via une directive 

App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

Exemple ici .

Ce processus est similaire pour la plupart des plugins qui modifient le DOM.

- * -

En outre, vous pouvez surveiller les modifications des données sous-jacentes du graphique et les redessiner. Vous pouvez ainsi récupérer des données via le service $ http à partir de votre contrôleur et mettre à jour la vue automatiquement. Ceci peut être réalisé en modifiant la fonction de liaison dans l'objet de définition de directive

   var chart = null,
       opts  = { };

    scope.$watch(attrs.ngModel, function(v){
        if(!chart){
            chart = $.plot(elem, v , opts);
            elem.show();
        }else{
            chart.setData(v);
            chart.setupGrid();
            chart.draw();
        }
    });

Notez l'utilisation de l'API de Flot dans la directive pour atteindre ce que nous voulons.

Voici l'exemple complet

1 Peut aussi être un attribut.

67
jaime

Pour utiliser les plugins jQuery avec angularJS, vous devez les envelopper dans des directives. Vous pouvez trouver quelques exemples de directives de plugins jQuery en lisant le code source des directives angularUI: https://github.com/angular-ui/angular-ui/tree/master/modules/directives

1
Guillaume86