将csv文件加载到jQuery中？

问题描述：

我有一个CSV文件，我想用它作为jQuery flot图的源数据。将csv文件加载到jQuery中？

我应该：

找到一个jQuery插件，将加载CSV文件直接？
将CSV文件转换为JSON并使用它？
做一些完全不同的事情吗？

我没有太多的运气找到一个可以应付外部CSV文件的jQuery插件，但也许我错过了一些东西。

它看起来像在这里转换CSV到JSON是你最好的选择。你可以编写一个服务器端解析器，如果没有的话（不太可能）。 – Bojangles

@JamWaffles JSON转换和服务器端代码在这里完全没有必要。请参阅我的答案了解详情。 –

答

使用jQuery CSV插件获取数组。但是，您需要为图表构建/排序数组。

jQuery CSV Plugin

它只是发生在我你可能会想阅读使用jQuery平面CSV文件。这是不可能的。给javascript提供文件系统听起来像是一个可怕的想法。不过，您始终可以使用$.get()在服务器上加载文件。

确定：所以使用'$ .get（）'获取数据，然后使用CSV插件将其转换为数组？ – Richard

$ .get（）会得到一个包含CSV数据的字符串。将它传递给CSV插件会给你一个数组。然后，您可以修改该数组，但是您需要的格式是您的图表脚本将接受的格式。大多数制图脚本将接受数组格式的数据，因此部分应该不会很难。 –

太棒了，谢谢！ – Richard

答

无需服务器...

这可以无需服务器，如果你使用一个小的聪明才智来完成。

你需要两件事情：

浏览器即能够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

伟大的答案，埃文。 –

@ChrisG。谢谢，我很感激。只是尽我所能，让JS生态系统更好一点。 –

将csv文件加载到jQuery中？

相关推荐