Kein Server erforderlich ...
Dies kann ohne den Server erreicht werden, wenn Sie ein wenig Einfallsreichtum einsetzen.
Du brauchst 2 Dinge:
- Ein Browser, der HTML5-Datei-API fähig ist
- Die jQuery-CSV Bibliothek
Die jquery-csv-Parser-Bibliothek ist auf die Analyse von RFC 4180 -kompatiblen CSVs spezialisiert, mit vielen Funktionen, die über die Umwandlung von CSV hinausgehen Daten in JavaScript-Daten. Für diese Demonstration verwenden wir zwei Funktionen:
Die erste Methode ist toArrays (). Es benötigt eine mehrzeilige CSV-Zeichenfolge und wandelt sie in ein 2D-Array um.
Der zweite ist ein benutzerdefinierter Parser-Hook, der die Ausgabe (die alle Strings darstellt) automatisch in skalare (dh Integer / Float) Daten umwandelt. Grundsätzlich ist es durch die Verwendung eines Funktionsrückrufs möglich, zusätzliche Verarbeitungen in den Parser einzufügen.
Sobald Sie die CSV-Daten einer String-Variablen zugewiesen haben, ist die Umwandlung in JavaScript-Daten sehr einfach.
%Vor%Das ist alles für den CSV-Parsing-Schritt.
Nun, was Flot erwartet, ist ein Array von 2D-Arrays, wobei jedes 2D-Array ein unabhängiges Dataset enthält.
Um Ihre Daten zu erstellen, erstellen Sie zuerst ein leeres Array:
%Vor%Dann fügen Sie für jeden Datensatz, den Sie mit CSV generieren, einfach das Datenset zur Sammlung hinzu.
%Vor%Die Handhabung von Dateien über HTML5 ist ein schwieriges Thema, da asynchrone Rückrufe zum Laden von Dateien verwendet werden. das bedeutet keine Rücksendeaussagen. Um die Dinge einfach zu halten, mache ich das Flot-Plot einfach zu einem globalen Objekt.
Initialisieren Sie zuerst das Diagramm während des $ (document) .ready ():
%Vor%Hinweis: Ein Dummy-Datenobjekt wird hinzugefügt, damit das Diagramm initialisiert werden kann.
Fügen Sie dann einen Dateihandler hinzu:
%Vor%Angenommen, dies kann eine oder mehrere CSV-Dateien laden. Dies wird aufgerufen, nachdem Sie Ihre Dateien aus dem Dateidialog ausgewählt haben. Die Daten werden auf leer zurückgesetzt (dh []), weil wir nach jeder Ausführung des Dateidialogs neu beginnen wollen; Andernfalls werden Sie an eine vorherige Datenmenge angefügt.
Dadurch werden die Dateien durchlaufen und flotFileData () für jede Datei aufgerufen, die im Dateidialog ausgewählt wurde.
Hier ist der Code für die Behandlung des offenen Callbacks der Datei:
%Vor%Dies liest die Datei als Klartext und stellt den Inhalt über event.target.result zur Verfügung. Der CSV-Parser wandelt die CSV in skalare Daten in zweidimensionaler Array-Form um. Um mehrere Datensätze zu stapeln, müssen wir sie an die Daten anhängen, die sich bereits im Plot befinden. Daher müssen wir die vorhandenen Daten zuerst über flot.getData () speichern. Fügen Sie die neuen Daten an, legen Sie sie über flot.setData () fest und zeichnen Sie schließlich das Diagramm neu.
Hinweis: Wenn die Bereiche des Diagramms nicht neu berechnet werden müssen, können Sie den Aufruf flot.setupGrid () überspringen.
Idealerweise sollte das Neuzeichnen nur einmal pro Dateiladephase erfolgen, aber diese Demo wurde noch nicht optimiert. Das heißt, der Graph wird für jede gelesene Datei neu gezeichnet (definitiv nicht ideal).
Wenn Sie es in Aktion sehen möchten, werfen Sie einen Blick auf die Flotdemonstration 'bereitgestellt von der jquery-csv-Projekt. Ich schlage vor, dass Sie versuchen, sowohl die Datensätze analytics1.csv als auch analytics2.csv zu laden, damit Sie sehen können, wie beide Diagramme überlagert sind.
Wenn Sie sich dazu entschließen, die serverseitige Route zum Laden der CSV-Dateien zu verwenden, gibt es auch ein einfacheres Beispiel zum Laden der CSV-Datei aus einem Textfeld.
Disclaimer: Ich bin der Autor von jquery-csv.
Aktualisierung:
Aufgrund der Deaktivierung von Google Code wurde jquery-csv in GitHub verschoben