Ładowanie pliku csv do jQuery?

Question

Mam plik CSV, który chciałbym użyć jako dane źródłowe dla wykresu flotowego jQuery.

powinienem:

1. Znajdź jQuery plugin, który będzie załadować plik CSV bezpośrednio?
2. Konwertuj plik CSV na JSON i użyj go zamiast tego?
3. Zrobić coś zupełnie innego?

Nie mam wielkiego problemu ze znalezieniem wtyczki jQuery, która poradzi sobie z zewnętrznym plikiem CSV, ale może brakuje mi czegoś.

Answer 1

Użyj wtyczki jQuery CSV, aby uzyskać tablicę. Zbuduj/sortuj tablicę, jakkolwiek potrzebujesz wykresu.

jQuery CSV Plugin

To właśnie doszło do mnie, można myśleć o czytanie płaski plik CSV z jQuery. To nie jest możliwe. Nadanie javascriptowi dostępu do systemu plików brzmi jak okropny pomysł. Zawsze możesz użyć $.get(), aby załadować plik na serwerze.

Answer 2

Nie wymaga serwera ...

Można to osiągnąć bez serwera jeśli zatrudniają trochę pomysłowości.

Musisz 2 rzeczy:

• przeglądarki, która jest HTML5 File API zdolny
• Biblioteka jQuery-CSV

Parser biblioteka jquery-CSV specjalizuje się w parsowania RFC 4180 zgodnego CSV z wieloma możliwościami wykraczającymi poza przekształcanie danych CSV w dane JavaScript. Na potrzeby tej demonstracji wykorzystamy dwie funkcje:

Pierwsza z nich to metoda toArrays(). Zajmuje wieloliniowy ciąg znaków CSV i przekształca go w tablicę 2D.

Drugi to zdefiniowany przez użytkownika hak parsera, który automatycznie przekształca dane wyjściowe (które są wszystkimi ciągami znaków) w dane skalarne (tj. Liczby całkowite/zmiennoprzecinkowe). Zasadniczo, dzięki użyciu wywołania funkcji, możliwe jest wstawienie dodatkowego przetwarzania do analizatora składni.

Po przypisaniu danych CSV do zmiennej łańcuchowej transformacja do danych JavaScript jest bardzo prosta.

var csv = "" // this is the string containing the CSV data 
var data = $.csv.toArray(csv, { 
    onParseValue: $.csv.hooks.castToScalar 
}); 

To wszystko na etapie parsowania CSV.

---

Teraz Flot spodziewa się tablicy tablic 2D, w której każda tablica 2D zawiera niezależny zbiór danych.

zbudować danych utworzyć pustą tablicę pierwszy:

var flotData = []; 

Następnie dla każdego zestawu danych można wygenerować za pomocą CSV wystarczy dodać zestaw danych do kolekcji.

var flotData.push(data); 

obsługi poprzez HTML5 File to trudne wątek, ponieważ używa asynchronicznych wywołań zwrotnych, aby załadować pliki; to oznacza brak zwrotów. Aby wszystko było proste, po prostu ustawię flot na obiekt globalny.

pierwsze zainicjować spisek podczas $ (document) .ready():

var data = []; 
flot = $.flot($('#plotdiv'), data, options); 

Uwaga: fikcyjny obiekt dane są dodawane tak wykres może być zainicjowany.

Następnie dodać obsługi plików:

// handles csv files 
function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // reset the flot dataset 
    flot.setData([]); 
    for(var i=0, len=files.length; i<len; i++) { 
    flotFileData(files[i], i); 
    } 
} 

Załóżmy, że to może załadować jeden-or-więcej plików z danymi CSV. Zostanie wywołana po wybraniu plików z okna dialogowego pliku. Dane zostaną zresetowane do pustego (tj. []), Ponieważ chcemy zacząć od nowa za każdym razem, gdy okno dialogowe pliku zostanie wykonane; w przeciwnym razie będziesz dołączał do poprzedniego zestawu danych.

Ten cykl będzie poprzez pliki i wywołać flotFileData() dla każdego pliku, który został wybrany w oknie dialogowym plików ..

Oto kod do obsługi plików otwartych callback:

function flotFileData(file, i) { 
    var reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload = function(event){ 
    var csv = event.target.result; 
    var newData = $.csv.toArrays(csv, { 
     onParseValue:$.csv.hooks.castToScalar 
    }); 
    var data = flot.getData(); 
    data[i] = newData; 
    flot.setData(data); 
    flot.setupGrid(); 
    flot.draw(); 
    }; 
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); }; 
} 

To odczytuje plik jako zwykły tekst i udostępnia zawartość za pośrednictwem zdarzenia event.target.result. Analizator CSV przekształca plik CSV na dane skalarne w postaci dwuwymiarowej tablicy. Aby ułożyć wiele zestawów danych, musimy je dołączyć do danych, które już znajdują się na wykresie, dlatego najpierw musimy zapisać istniejące dane za pomocą metody flot.getData(). Dołącz nowe dane, ustaw je za pomocą flot.setData() i wreszcie ponownie narysuj wykres.

Uwaga: Jeśli zakresy wykresu nie muszą być ponownie obliczane, można pominąć wywołanie flot.setupGrid().

W idealnym przypadku przerysowanie powinno nastąpić tylko raz w fazie ładowania pliku, ale to demo nie zostało jeszcze zoptymalizowane. Oznacza to, że wykres zostanie ponownie narysowany dla każdego przeczytanego pliku (zdecydowanie nie jest idealny).

Jeśli chcesz zobaczyć go w akcji, spójrz na "Flot Demonstration" dostarczony przez projekt jquery-csv. Proponuję spróbować załadować oba zestawy danych analytics1.csv i analytics2.csv, aby zobaczyć, jak oba są nakładane na wykres.

Jeśli zdecydujesz się na trasę po stronie serwera, aby załadować pliki CSV, istnieje również bardziej podstawowy przykład demonstrujący ładowanie pliku CSV z obszaru tekstowego.

Nota prawna: Jestem autorem jquery-csv.

Aktualizacja:

powodu szalowania Google Code, jquery-csv has been moved to GitHub