wake-up-neo.net

Wie kann ich Flot mit AngularJS integrieren?

Ich bin neu bei Angular und Flot, habe aber Erfahrung mit Jquery und Javascript. Ich bin etwas verwirrt darüber, wie man ein Flot-Diagramm an Angular -Datenmodelle binden kann, da Flot ein JQuery-Plugin ist. Ich habe herumgesucht, konnte aber kein Beispiel finden.

Gerne verwende ich auch Highcharts, Google-Charts oder andere Chartlösungen.

37
JBCP

Da das Charting umfangreiche DOM-Manipulationen erfordert, sind Anweisungen der Weg. 

Daten können im Controller gespeichert werden

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

Sie können auch ein benutzerdefiniertes HTML-Tag 1 erstellen, indem Sie das Modell angeben, von dem Sie Daten abrufen möchten

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

welcher Winkel durch eine Direktive kompiliert werden kann 

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

Beispiel hier .

Dieser Prozess ist für die meisten Plugins, die das DOM ändern, ähnlich.

- * -

Sie können auch nach Änderungen in den zugrunde liegenden Daten des Diagramms suchen und diese neu zeichnen. Auf diese Weise können Sie Daten über den $ http-Dienst von Ihrem Controller abrufen und die Ansicht automatisch aktualisieren. Dies kann erreicht werden, indem die Verknüpfungsfunktion im Direktionsdefinitionsobjekt geändert wird

   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();
        }
    });

Beachten Sie die Verwendung der Flot-API innerhalb der Direktive, um das zu erreichen, was wir wollen.

Hier das vollständige Beispiel


1 Kann auch ein Attribut sein.

67
jaime

Um jQuery-Plugins mit angleJS verwenden zu können, müssen Sie sie in Anweisungen einpacken. Beispiele für jQuery-Plugins-Anweisungen finden Sie im Quellcode der angleUI-Anweisungen: https://github.com/angular-ui/angular-ui/Baum/Master/Module/Richtlinien

1
Guillaume86