将csv文件加载到jQuery中？

Question

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

我是不是该:

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

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

Answer 1

无需服务器......

如果您使用一点点聪明才智,这可以在没有服务器的情况下完成.

你需要两件事:

• 浏览器是HTML5文件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图成为一个全局对象.

首先在$(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()调用.

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

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

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

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

更新:

由于关闭了Google Code,jquery-csv已被移至GitHub

Answer 2

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

jQuery CSV插件

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