Comment intégrer Flot avec AngularJS?

Question

Je suis nouveau sur Angular et Flot, mais j'ai de l'expérience avec Jquery et Javascript. Je suis un peu confus sur la manière de lier un graphique Flot aux modèles de données Angular, puisque Flot est un plugin JQuery. J'ai cherché un peu partout, mais je n'ai pas pu trouver d'exemple.

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

Answer 1

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

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ée1 en spécifiant le modèle dont vous souhaitez obtenir les données

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 modifications des données sous-jacentes du graphique et le redessiner, de sorte que vous puissiez récupérer les données via le service $http depuis votre contrôleur et mettre à jour la vue automatiquement. Cela 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();
        }
    });

Remarquez l'utilisation de l'API de Flot au sein de la directive pour obtenir le résultat souhaité.

Voici l'exemple complet

---

1 Peut aussi être un attribut.

Answer 2

Pour utiliser des 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