jquery - 将 csv 文件加载到 jQuery 中？

Question

我有一个 CSV 文件，我想将其用作 jQuery 浮点图的源数据。

我应该:

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

我没有找到一个可以处理外部 CSV 文件的 jQuery 插件，但也许我错过了一些东西。

Answer 1

无需服务器...

如果您发挥一点聪明才智，这可以在没有服务器的情况下完成。

您需要两件事:

• 浏览器 HTML5 File API有能力
• jQuery-CSV图书馆

jquery-csv解析器库专门用于解析RFC 4180兼容的 CSV，除了将 CSV 数据转换为 JavaScript 数据之外，还具有许多功能。为了演示的目的，我们将使用两个功能:

第一个是 toArrays() 方法。它采用多行 CSV 字符串并将其转换为二维数组。

第二个是用户定义的解析器 Hook ，它自动将输出(所有字符串)转换为标量(即整数/浮点)数据。基本上，通过使用函数回调，可以将额外的处理内联到解析器中。

将 CSV 数据分配给字符串变量后，转换为 JavaScript 数据就非常简单。

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

这就是 CSV 解析步骤的全部内容。

<小时/>

现在，Flot 期望的是一个 2D 数组的数组，其中每个 2D 数组都包含一个独立的数据集。

要构建数据，请先创建一个空数组:

var flotData = [];

然后，对于使用 CSV 生成的每个数据集，您只需将数据集添加到集合中即可。

var flotData.push(data);

通过 HTML5 处理文件是一个棘手的话题，因为它使用异步回调来加载文件；这意味着没有返回语句。为了简单起见，我将把流程图设为全局对象。

首先在 $(document).ready() 期间初始化绘图:

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() 调用。

理想情况下，每个文件加载阶段重绘应该只发生一次，但此演示尚未优化。这意味着，将为读取的每个文件重新绘制图表(绝对不理想)。

如果您想查看它的实际效果，请查看“Flot Demonstration” ' 由 jquery-csv 项目提供。我建议您尝试加载analytics1.csv和analytics2.csv数据集，以便您可以看到两者如何叠加在图表上。

如果您决定采用服务器端路径来加载 CSV 文件，还有一个更基本的示例演示如何从文本区域加载 CSV。

免责声明:我是 jquery-csv 的作者。

更新:

由于 Google Code 的关闭，jquery-csv has been moved to GitHub