将csv文件加载到jQuery中？

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

我应该：

找到可以直接加载CSV文件的jQuery插件吗

将CSV文件转换为JSON并使用它

做些完全不同的事情

---

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

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

---

我突然想到，您可能正在考虑使用jQuery读取平面CSV文件。那是不可能的。让javascript访问文件系统听起来是个糟糕的主意。但是，您始终可以使用

$.get（）

在服务器上加载文件。

不需要服务器…

如果您使用一点独创性，这可以在没有服务器的情况下完成

您需要两件事：

• 能够
• 图书馆

jquery csv解析器库专门解析兼容的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期望的是一个2D数组数组，其中每个2D数组包含一个独立的数据集

要生成数据，请先创建空数组：

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

var flotData.push(data);

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

首先在$（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);
  }
}

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

注意：添加了一个虚拟数据对象，因此可以初始化图形

然后，添加一个文件处理程序：

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

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项目提供的“”。我建议您尝试加载analytics1.csv和analytics2.csv数据集，以便您可以看到这两个数据集是如何覆盖在图形上的

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

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

更新：

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

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

---

由于谷歌代码的关闭，

看起来将CSV转换为JSON是您最好的选择。您可以编写服务器端解析器，如果还没有的话（不太可能）。@JamWaffles JSON转换和服务器端代码在这里完全不需要。有关详细信息，请参见我的答案。确定：因此，请使用

$.get（）

获取数据，然后使用CSV插件将其转换为数组？$.get（）将获取包含CSV数据的字符串。将其传递给CSV插件将为您提供一个数组。然后，您可以根据需要修改该数组，使其采用图表脚本可以接受的格式。大多数图表脚本都会接受数组格式的数据，所以这部分应该不难。嗯，实际上，如果我尝试获取

text.split不是一个函数

javascript错误-看起来像

$。csv

需要一个字符串，但从

$.get（）

返回的数据是一个对象。我想我可以试试这个：但感觉好像越来越乱了。我不会说这是混乱的，这就是用Javascript做这些事情的方式。当然。。。不，我指的是将对象转换为字符串，但仅在某些浏览器中支持它的一部分。@ChrisG。谢谢，我很感激。我只是想尽我所能让JS生态系统变得更好。