Wie fügt man mehrere Graphen mit Flot und Angular hinzu?

Ich habe einen Datensatz, der aus Daten für mehrere Tage besteht. Jeder Tag wird in einer Zeile dargestellt. Dies sollte in Graphen mit Flot.js und die Daten werden über Angularjs geladen werden. Auf $ (document) .ready sind keine Daten vorhanden, da diese anschließend über HTTP vom Server geladen werden. Da ich nicht alle 90 Tage (entspricht 90 Zeilen) in einen einzigen Graphen schreiben möchte, muss ich sie in separate Graphen aufteilen. Ich habe in verschiedenen Tutorials gesehen, wie man mit Direktiven in Angular arbeitet, um DOM-Manipulation zu erreichen. Dies erfordert jedoch (nach meinem Verständnis), dass das rohe DOM-Element bereits auf der Seite vorhanden ist (wie in diesem Tutorial: How to Integrate Flot with AngularJS?). Eigentlich erklärt dies die Funktionalität von Direktiven, aber nur, wenn Sie nur eine Daten haben einstellen. Da ich die Daten für mehr als einen Graphen aufteilen muss, wie kann ich sie in verschiedene Graphen einfügen, die bei der Seitenerstellung nicht vorhanden sind?Wie fügt man mehrere Graphen mit Flot und Angular hinzu?

Vielen Dank für Ihre Hilfe!

Quelle

2017-03-24 Stefan

Sie Recht, $ (Dokument) .ready wird natürlich vor dem Laden von Daten ausgelöst, müssen Sie Winkel $ http.get und 'Dann' Rückruf als Ort verwenden, um Ihre Daten zu behandeln – happyZZR1400

Vielen Dank für die Antworten. Ich denke, etwas ist unklar: Ich weiß, wie man die Daten mit $ http.post in meinem Fall bekommt und es funktioniert gut, wenn ich das html-Element statisch definiert habe. Aber wenn ich nicht weiß, wie viele Untermengen mein Ergebnis haben wird (und daher wie viele HTML-Elemente benötigt werden), kann ich sie nicht in der HTML-Datei erstellen. Das ist mein Problem, da ich keine Möglichkeit gefunden habe, dynamisch HTML-Elemente zu erstellen und die Flot.js-Logik mit den abgerufenen Daten zu verwenden. – Stefan

hier plunker mit sehr einfachen Winkel + flicht Implementierung

$http.get('api/data.json').then(res=>{ 
    $scope.name = res.data[0].label; 
    let num =res.data[0].data[0][1]; 
    $.plot($("#placeholder"), [ [[0, 0], [1, num]] ], { yaxis: { max: 1 } }); 
});

Quelle

2017-03-24 08:22:02 happyZZR1400

Dies ist Plunker, wie ich in der Lage war, die Diagramme auf einem Array von Daten zu erstellen. Der Schlüssel war eine Kombination aus Direktiven und ng-repeat. https://plnkr.co/edit/IUvJriqbyB792R1oyhxJ?p=preview

<div ng-controller="Ctrl"> 
     <div ng-repeat="result in results"> 
      <section> 
      <chart ng-model="result" style="display:inline-block;width:400px;height:200px"> 

      </chart> 
      </section> 
     </div> 
    </div>

Leider ist es nicht die grafischen Ergebnisse auf Plunker zeigen, aber der gleiche Code funktioniert auf meinem Rechner. Danke!

Quelle

2017-03-24 10:48:38 Stefan

Sie Plunkr war nicht arbeiten, weil die Anfrage URL sollte "api/data.json" statt "/api/data.json – happyZZR1400

Vielen Dank! Du hast recht und ich habe das Sample so angepasst, dass es auch andere nutzen können. Es funktioniert jetzt wie erwartet. – Stefan

Wie fügt man mehrere Graphen mit Flot und Angular hinzu?

Antwort

Verwandte Themen