Comment intégrer Flot à AngularJS ?

Question

Je suis nouveau dans Angular et Flot, mais j'ai de l'expérience avec Jquery et Javascript. Je ne sais pas trop comment lier un graphique Flot à des modèles de données Angular, puisque Flot est un plugin JQuery. J'ai fait des recherches, mais je n'ai pas pu trouver d'exemple.

Je serais également heureux d'utiliser highcharts, google-charts, ou toute autre solution graphique.

Answer 1

Étant donné que la création de graphiques implique une manipulation lourde du DOM, les directives sont la solution.

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 dont vous voulez obtenir les données

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

qu'angular peut compiler grâce à 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.

-*-

De plus, vous pouvez surveiller les changements dans les données sous-jacentes du graphique et les redessiner. De cette façon, vous pouvez récupérer les données via le service $http depuis 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 la 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();
        }
    });

Remarquez l'utilisation de l'API de Flot dans la directive pour obtenir ce que nous voulons.

Voici l'exemple complet

---

1 Peut aussi être un attribut.

Answer 2

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