it-swarm.com.de

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