0

我正在使用 Highcharts 制作本地 html5 统计页面，我想从我自己的笔记本电脑中分配的 csv 文件中获取图表的数据。javascript代码是：

 var arch = new FileReader();
 var content = arch.readAsArrayBuffer('./csvs/sample1.csv');
 //var content = arch.readAsText('./csvs/sample1.csv'.files);
 var sample = $.csv.toArrays(content);
 console.log(sample1);
 $(function () {
    $('#container').highcharts({
        xAxis: {
            min: -0.5,
            max: 5.5
        },
        yAxis: {
            min: 0
        },
        title: {
            text: 'Scatter plot with regression line'
        },
        series: [{
            type: 'line',
            name: 'Regression Line',
            data: [[0, 1.11], [5, 4.51]],
            marker: {
                enabled: true
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        }, {
            type: 'scatter',
            name: 'Observations',
            data: sample,
            marker: {
                radius: 4
            }
        }]
    });
});

我也在使用 jquery-csv 插件，但它不起作用。我已经用 fopen 进行了测试，但也没有。控制台告诉我：

未捕获的 TypeError：无法在“FileReader”上执行“readAsArrayBuffer”：参数 1 不是“Blob”类型。

谢谢。

4

3 回答 3

1

要读取本地文件，您需要输入类型文件：

  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
        var contents = e.target.result;
        document.getElementById('output').innerHTML = contents;
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
<input type="file" id="fileinput"/>
<textarea id="output" cols="60" rows="10"></textarea>

于 2015-05-10T15:55:24.347 回答
0

You need to read the file into an object, then pass that object to your FileReader.readAsXXX method.

FileReader.readAsArrayBuffer() doesn't take a string.

Here is some API docs for you that may help.

于 2015-05-10T15:47:19.867 回答
0

FileReader.readAsArrayBuffer(..)期望 Blob 作为参数，而不是字符串。Blob 是二进制数据，从文件中读取。您可以在mdn上找到有关 FileReader 的文档。

它告诉我们我们也可以传递一个File( docs )，我们可以从FileList( docs ) 中提取它。

您无法直接从计算机中读取文件。那将是一个重大的安全漏洞。我们需要做的是有一个输入元素，我们可以在其中选择文件，或者将文件拖放到其中。然后我们读取文件并执行您的代码：

<input type="file" id="myfile"> <input type="button" id="csvbutton" value="Load">

和 javascript：

$("#csvbutton").on( "click", function() {
  var file = $("#myfile")[0].files[0];
  if( file == undefined ) {
    //RIP
    return;
  }
  var arch = new FileReader();
  var content = arch.readAsArrayBuffer(file);
  //etc
} );
于 2015-05-10T15:56:54.360 回答