Đang tải tệp csv vào jQuery?

Question

Tôi có tệp CSV mà tôi muốn sử dụng làm dữ liệu nguồn cho biểu đồ flot jQuery.

Tôi có nên:

1. Tìm một plugin jQuery rằng sẽ tải tập tin CSV trực tiếp?
2. Chuyển tệp CSV thành JSON và sử dụng thay vào đó?
3. Làm điều gì đó hoàn toàn khác?

Tôi không có nhiều may mắn khi tìm một plugin jQuery có thể đối phó với tệp CSV bên ngoài, nhưng có thể tôi đang thiếu thứ gì đó.

Answer 1

Sử dụng plugin jQuery CSV để nhận mảng. Xây dựng/sắp xếp các mảng tuy nhiên bạn cần cho biểu đồ.

jQuery CSV Plugin

Nó chỉ xảy ra với tôi bạn có thể nghĩ đến việc đọc một tập tin CSV phẳng với jQuery. Đó là không thể. Cho phép javascript truy cập vào hệ thống tập tin giống như một ý tưởng khủng khiếp. Tuy nhiên, bạn luôn có thể sử dụng $.get() để tải tệp trên máy chủ.

Answer 2

Không có máy chủ yêu cầu ...

Điều này có thể được thực hiện mà không cần máy chủ nếu bạn sử dụng một chút khéo léo.

Bạn sẽ cần 2 điều:

• Một trình duyệt đó là HTML5 File API khả năng
• Các jQuery-CSV thư viện

Thư viện phân tích cú pháp jquery-csv chuyên về phân tích cú pháp RFC 4180 compliant CSV, với nhiều khả năng ở trên và hơn thế nữa, chỉ cần chuyển dữ liệu CSV thành dữ liệu JavaScript. Với mục đích của cuộc biểu tình này, chúng ta sẽ sử dụng hai tính năng:

Cách đầu tiên là phương thức toArrays(). Phải mất một chuỗi CSV nhiều dòng và biến đổi nó thành một mảng 2D.

Thứ hai là móc phân tích cú pháp do người dùng xác định tự động chuyển đổi đầu ra (tất cả là chuỗi) thành dữ liệu vô hướng (tức là số nguyên/float). Về cơ bản, thông qua việc sử dụng một hàm gọi lại, có thể nội dòng xử lý bổ sung vào trình phân tích cú pháp.

Khi bạn đã gán dữ liệu CSV cho biến chuỗi, việc chuyển đổi sang dữ liệu JavaScript rất đơn giản.

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

Đó là tất cả cho bước phân tích cú pháp CSV.

---

Bây giờ, Flot mong đợi là một mảng các mảng 2D trong đó mỗi mảng 2D chứa một tập dữ liệu độc lập.

Xây dựng dữ liệu của bạn tạo ra một mảng trống đầu tiên:

var flotData = []; 

Sau đó cho mỗi tập dữ liệu bạn tạo ra sử dụng CSV bạn chỉ cần thêm các số liệu để bộ sưu tập.

var flotData.push(data); 

Xử lý tệp qua HTML5 là một chủ đề khó khăn vì sử dụng gọi lại không đồng bộ để tải tệp; điều đó có nghĩa là không có báo cáo trả lại. Để giữ cho mọi thứ đơn giản, tôi sẽ chỉ làm cho cốt truyện flot là một đối tượng toàn cục.

Đầu tiên khởi cốt truyện trong $ (document) .ready():

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

Lưu ý: Một đối tượng dữ liệu giả được thêm vào để đồ thị có thể được khởi tạo.

Sau đó, thêm một handler file:

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

Giả định rằng điều này có thể tải một hoặc nhiều file-dữ liệu CSV. Điều này được gọi sau khi bạn chọn tệp của mình từ hộp thoại tệp. Dữ liệu được đặt lại thành trống (tức là []) vì chúng tôi muốn bắt đầu mới sau mỗi lần hộp thoại tệp được thực thi; nếu không bạn sẽ được thêm vào tập dữ liệu trước đó.

Điều này sẽ chu kỳ thông qua các tập tin và gọi flotFileData() cho mỗi tập tin đó đã được lựa chọn trong hộp thoại tập tin ..

Dưới đây là đoạn code để xử lý các tập tin mở 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); }; 
} 

Điều này đọc tệp dưới dạng văn bản thuần và làm cho nội dung có sẵn thông qua event.target.result. Trình phân tích cú pháp CSV chuyển đổi CSV thành dữ liệu vô hướng ở dạng mảng 2 chiều. Để ngăn xếp nhiều tập dữ liệu, chúng tôi cần thêm dữ liệu đã có trong cốt truyện, vì vậy chúng tôi cần lưu trữ dữ liệu hiện có trước qua flot.getData(). Nối thêm dữ liệu mới, đặt nó qua flot.setData() và cuối cùng vẽ lại cốt truyện.

Lưu ý: Nếu phạm vi của biểu đồ không cần được tính lại, bạn có thể bỏ qua lệnh flot.setupGrid().

Lý tưởng nhất, việc vẽ lại chỉ xảy ra một lần cho mỗi giai đoạn tải tệp nhưng bản demo này chưa được tối ưu hóa. Điều đó có nghĩa là, đồ thị sẽ được vẽ lại cho mọi tệp được đọc (chắc chắn không phải là lý tưởng).

Nếu bạn muốn xem nó hoạt động, hãy xem 'Flot Demonstration' do dự án jquery-csv cung cấp. Tôi khuyên bạn nên thử tải cả bộ dữ liệu analytics1.csv và analytics2.csv để bạn có thể xem cả hai được phủ lên trên biểu đồ như thế nào.

Nếu bạn quyết định đi tuyến đường phía máy chủ để tải tệp CSV, cũng có một ví dụ cơ bản hơn thể hiện tải CSV từ vùng văn bản.

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của jquery-csv.

Cập nhật:

Do ván khuôn của Google Code, jquery-csv has been moved to GitHub