将 Csv 文件加载到 highcharts 中的文件答案

【问题标题】：File loading a Csv file into highcharts将 Csv 文件加载到 highcharts 中的文件
【发布时间】：2014-01-28 15:16:49
【问题描述】：

我正在高图中绘制 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 文件。如何将文件的文件阅读器上传链接到 highcharts 进行绘图，而不是使用 $.get(5.csv', function(data) { ？或者我最好使用 jquery-csv (https://github.com/evanplaice/jquery-csv)。我知道存在浏览器安全问题。我的文件是一个 3 列 Csv，带有一行标题，第 1 列是 x 轴，2 是 y 轴，3 将是错误栏，我还没有实现：

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

等等……

【问题讨论】：

我不明白你的问题。你的图表工作正常吗？
"我要输入本地的 csv 文件"，什么是本地 csv 文件？这是客户端上的 csv 文件吗？您是否希望使用 HTML5 FileReader (developer.mozilla.org/en-US/docs/Web/API/FileReader)？
您的 CSV 文件长什么样？
在您的示例中，您推送到带有点 [0.009,2.40E-01] 的类别数组，在 categoreis 中应该是单个值而不是对的数组。对可以在序列数据中使用，就像你一样（这部分是正确的）
明白，塞巴斯蒂安。是的，我想使用 FileReader 或类似的东西来获取文件。

标签： javascript csv highcharts

【解决方案1】：

现在可以通过 File API 上传了

function processFiles(files) {
    var chart;
    options = {
            chart: {
                zoomType: 'x',
                renderTo: 'container',
                type: 'line',
                zoomType: 'x'

            },
            title: {
                text: ''
            },
            subtitle: {
                text: '' 
            },
            xAxis: {
                type: 'linear',
                minorTickInterval: 0.1,
                title: {
                    text: 'Q'}
            },
            yAxis: {
                type: 'linear',
                minorTickInterval: 0.1,
                title: {
                    text: 'I(ntensity)'
                },
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: [0, 0, 0, 300],
                        stops: [
                            [0,      Highcharts.getOptions().colors[0]],
                            [0, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    }
                }
            },
            series: [{
                name: 'Series'}]
    };



var file = files[0]
var reader = new FileReader();
reader.onload = function (e) {

str = e.target.result;
    var lines = str.split("\n");
    var c = [], d = [], er = [];
    $.each(lines, function(lineNo, line) {
            if(lineNo > 0 ){
                var items = line.split(','); 
                var strTemp = items[0];
                er = parseFloat(items[2])
                a = parseFloat(items[0])
                b = parseFloat(items[1])
                min = (b - (er/2))
                max = b + ((er/2))
                c = [a , b];
                var q = [], e = [];
                q = [min, max]
                e.push(q);

                d.push(c);

                console.log(c);
                console.log(q);
            }
    });

    options.xAxis.categories = c.name;
    lineWidth: 1
    options.series = [{
            data: d,
            type: 'scatter'
    }, {
        name: 'standard deviation',
        type: 'errorbar',
        color: 'black',
        data : e }
];
    $("#Linear").click(function(){
        $('#container').highcharts().yAxis[0].update({ type: 'linear'});
    });

    $("#Log").click(function(){
        $('#container').highcharts().yAxis[0].update({ type: 'logarithmic'});
    });

    $("#Guinier").click(function(){
        $('#container').highcharts().yAxis[0].update({ data: Math.log(d)});
        options.xAxis.categories = c.name;
        lineWidth: 1
        options.series = [{
            data: d
    }]
    });

  chart = new Highcharts.Chart(options);
}

    reader.readAsText(file)
    var output = document.getElementById("fileOutput")

};

【讨论】：

【解决方案2】：

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

为此，您需要使用 HTML5 File API，它会为用户提供一个文件对话框来选择文件。

如果您打算使用 jquery-csv，这里有一个示例来演示如何做到这一点。

File Handling Demo

我有偏见，但我说使用 jquery-csv 来解析数据，尝试编写 CSV 解析器会带来很多讨厌的边缘情况。

来源：我是jquery-csv的作者

作为替代方案，如果 jquery-csv 不能满足您的需求，PapaParse 也很好。

【讨论】：