Question

我有一个CSV文件，我想用它作为jQuery flot图的源数据。

我应该：

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

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

Answer 1

无需服务器......

如果您采用一点创造力，这可以在没有服务器的情况下完成。

你需要两件事：

支持HTML5 File API的浏览器
jQuery-CSV库

jquery-csv解析器库专门解析符合RFC 4180的CSV，其中包含许多功能，只是将CSV数据转换为JavaScript数据。出于演示的目的，我们将使用两个功能：

第一个是toArrays（）方法。它需要一个多行CSV字符串并将其转换为2D数组。

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

将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进行文件处理是一个棘手的主题，因为它使用异步回调来加载文件;这意味着没有退货声明。为了简单起见，我只是将flot图作为一个全局对象。

首先在$（文件）.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（）调用。

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

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

如果您决定使用服务器端路由加载CSV文件，还有一个更基本的示例，演示如何从textarea加载CSV。

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

<强>更新

由于关闭了Google代码，jquery-csv has been moved to GitHub

Answer 2

使用jQuery CSV插件获取数组。根据图表需要构建/排序数组。

jQuery CSV Plugin

我刚刚想到你正在考虑用jQuery阅读一个平面的CSV文件。那是不可能的。给javascript访问文件系统听起来像一个可怕的想法。但是，您始终可以使用$.get()在服务器上加载文件。

将csv文件加载到jQuery中？

2 个答案: