將csv文件加載到jQuery中？

Question

我有一個CSV文件，我想用它作爲jQuery flot圖的源數據。

我應該：

1. 找到一個jQuery插件，將加載CSV文件直接？
2. 將CSV文件轉換爲JSON並使用它？
3. 做一些完全不同的事情嗎？

我沒有太多的運氣找到一個可以應付外部CSV文件的jQuery插件，但也許我錯過了一些東西。

Answer 1

使用jQuery CSV插件獲取數組。但是，您需要爲圖表構建/排序數組。

jQuery CSV Plugin

它只是發生在我你可能會想閱讀使用jQuery平面CSV文件。這是不可能的。給javascript提供文件系統聽起來像是一個可怕的想法。不過，您始終可以使用$.get()在服務器上加載文件。

Answer 2

無需服務器...

這可以無需服務器，如果你使用一個小的聰明才智來完成。

你需要兩件事情：

• 瀏覽器即能夠HTML5 File API
• 的jQuery-CSV庫

的jQuery的CSV解析庫專業解析RFC 4180兼容CSV，除了將CSV數據轉換爲JavaScript數據之外，還有許多功能。爲了演示的目的，我們將使用兩個功能：

第一個是toArrays（）方法。它需要一個多行CSV字符串並將其轉換爲二維數組。

第二個是用戶自定義的解析器鉤子，可以自動將輸出（即所有字符串）轉換爲標量（即整型/浮點型）數據。基本上，通過使用函數回調，可以將附加處理內聯到解析器中。

將CSV數據分配給字符串變量後，轉換爲JavaScript數據非常簡單。

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

這就是所有的CSV解析步驟。

---

現在，Flot所期望的是一個二維數組數組，其中每個二維數組包含一個獨立的數據集。

要建立你的數據首先創建一個空數組：

var flotData = []; 

然後爲每個數據集生成您使用CSV您只需將數據集添加到集合中。

var flotData.push(data); 

通過HTML5處理文件是一個棘手的話題，因爲它使用異步回調來加載文件;這意味着沒有返回聲明。爲了簡單起見，我將把flot繪製成一個全局對象。

首先初始化$（文件）。就緒（）中的情節：

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

注意：僞數據對象添加使圖形可以被初始化。

然後，添加一個文件處理程序：

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

假設這可以加載一個或更多的CSV數據文件。在從文件對話框中選擇文件後，會調用它。數據被重置爲空（即[]），因爲我們想在每次執行文件對話框後重新開始;否則你會追加到以前的數據集。

這將循環通過文件，並致電flotFileData（）因爲這是在文件對話框中選擇的每一個文件..

下面是用於處理文件打開回調代碼：

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

它以純文本的形式讀取文件，並通過event.target.result使內容可用。 CSV解析器將CSV轉換爲二維數組形式的標量數據。要疊加多個數據集，我們需要追加到已經在圖中的數據，所以我們需要通過flot.getData（）來存儲現有的數據。附加新數據，通過flot.setData（）進行設置，最後重繪圖。

注意：如果圖表的範圍不需要重新計算，則可以跳過flot.setupGrid（）調用。

理想情況下，重繪應該只在每個文件加載階段發生一次，但該演示程序尚未優化。這意味着，圖形將被重新繪製每個讀取的文件（絕對不是理想的）。

如果你想看到它的行動，看看jquery-csv項目提供的'Flot Demonstration'。我建議你嘗試加載analytics1.csv和analytics2.csv數據集，以便看到兩者如何疊加在圖上。

如果您決定使用服務器端路徑加載CSV文件，還有一個更基本的示例，演示如何從textarea加載CSV。

聲明：我是jquery-csv的作者。

更新：

由於谷歌代碼的模板，jquery-csv has been moved to GitHub