将CSV文件加载到highcharts中的文件 [英] File loading a Csv file into highcharts

问题描述

我正在用高图绘制Csv列数据.代替:

$.get('5.csv', function(data)

我要使用以下命令输入本地桌面Csv文件:

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

我当前的Javascript代码如下:

var options = {
chart: {
    renderTo: 'container',
    defaultSeriesType: 'line'
},
title: {
    text: 'Test'
},
xAxis: {
    categories: []
},
yAxis: {
    title: {
        text: 'Units',

    }
},
series: []
};

// $.get('5.csv', function(data) {

var file = event.target.file;
var reader = new FileReader();
var txt=reader.readAsText(file);

    var lines = txt.split('\n');
    var c = [], d = [];
    $.each(lines, function(lineNo, line) {
            if(lineNo > 0 ){
                var items = line.split(','); 
                var strTemp = items[0];
                c = [parseFloat(items[0]), parseFloat(items[1])];
                d.push(c);
                console.log(c);
            }
    });


    options.xAxis.categories = c;
    options.series = [{
            data: d
    }];
    chart = new Highcharts.Chart(options);
});

我将如何去做呢?我想从本地台式机上传Csv文件.如何将文件的文件阅读器上载链接到高图以进行绘制，而不是使用$ .get(5.csv'，function(data){?或者我最好使用jquery-csv(解决方案

由于安全原因，您不能直接在客户端加载文件

为此，您需要使用HTML5 File API，该API将为用户提供一个文件对话框以选择文件.

如果您打算使用jquery-csv，下面的示例演示了如何做到这一点.

• 文件处理演示

我有偏见，但我说使用jquery-csv解析数据，尝试编写CSV解析器会带来很多麻烦的情况.

来源:我是jquery-csv

的作者

或者，如果jquery-csv无法满足您的需求， PapaParse 也非常好./p>

I'm plotting Csv column data in highcharts. Instead of the:

$.get('5.csv', function(data)

I want input a local desktop Csv file using:

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

My current Javascript code is below :

var options = {
chart: {
    renderTo: 'container',
    defaultSeriesType: 'line'
},
title: {
    text: 'Test'
},
xAxis: {
    categories: []
},
yAxis: {
    title: {
        text: 'Units',

    }
},
series: []
};

// $.get('5.csv', function(data) {

var file = event.target.file;
var reader = new FileReader();
var txt=reader.readAsText(file);

    var lines = txt.split('\n');
    var c = [], d = [];
    $.each(lines, function(lineNo, line) {
            if(lineNo > 0 ){
                var items = line.split(','); 
                var strTemp = items[0];
                c = [parseFloat(items[0]), parseFloat(items[1])];
                d.push(c);
                console.log(c);
            }
    });


    options.xAxis.categories = c;
    options.series = [{
            data: d
    }];
    chart = new Highcharts.Chart(options);
});

How would I go about doing this ? I want to upload a Csv file from a local desktop machine. How do I link the File Reader upload of the file to highcharts to plot, instead of using the $.get(5.csv', function(data) { ? Or am I better using jquery-csv (https://github.com/evanplaice/jquery-csv). I know there are browser security issues. My file is a 3 column Csv with a one line header, column 1 is the x-axis, 2 is the y-axis, 3 will be the error bar, which I haven't yet implemented:

Q,I,E
0.009,2.40E-01,5.67E-02
0.011,2.13E-01,3.83E-02
0.013,2.82E-01,2.28E-02

etc ....

解决方案

Due to security reasons you can't load a file directly on the client-side

To do this you need to use the HTML5 File API which will give the user a file dialog to select the file.

If you plan to use jquery-csv here's an example that demonstrates how to do that.

• File Handling Demo

I'm biased but I say use jquery-csv to parse the data, trying to write a CSV parser comes with a lot of nasty edge cases.

Source: I'm the author of jquery-csv

As an alternative, if jquery-csv doesn't meet your needs, PapaParse is very good too.

这篇关于将CSV文件加载到highcharts中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！