javascript - 在 highcharts 中读取上传的 csv 文件

Question

我想做的是上传csv文件，然后在highcharts中使用它作为数据源(图表的完整代码)

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'cont2',
                type: 'column'
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: []
            },
            yAxis: {

                title: {
                    text: 'Units'
                }
            },
            series: []
        };


$.get('datasample.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');

                // Categories in header
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }


                else {
                    var series = { 
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            series.data.push(parseFloat(item));
                        }
                    });

                    options.series.push(series);
                }

            });

            var chart = new Highcharts.Chart(options);
        });


    });

如您所见，csv 文件的路径是手动设置的，我使用 csv 上传按钮

<b>CSV</b> <input type="file" id="csvfile" accept=".csv"> 

如果我像这样为 csv 设置“位置”

document.getElementById('csvfile', function(data)

它不会工作..请帮我解决这个问题，我很绝望，我想尝试这个 api http://jquery-csv.googlecode.com/git/examples/flot.html (从文件加载)但我真的不明白(以防万一 jquery-csvgooglecode 的源代码: https://code.google.com/p/jquery-csv/source/browse/examples/flot.html?r=fe4f71afe603b037303c9f5597fb606df1c33ce0&spec=svnfe4f71afe603b037303c9f5597fb606df1c33ce0 )感谢您的任何帮助，非常感谢!ps:我没有使用服务器，所以没有 php 解决方案

Answer 1

这就是如何绑定(bind)事件来加载文件:

$('#csvfile').on('change', readFile);

然后回调可以是这样的:

function readFile(e) {
    //Load first file:
    var f = e.target.files[0]; 
    if (f) {
        var r = new FileReader();
        r.onload = renderChart;
        r.readAsText(f);
    } else { 
        alert("Error, file not loaded");
    }
}

现在您加载了文件并需要创建 renderChart 方法，您可以在其中放置负责创建图表的代码:

function renderChart(e) {
    var data = e.target.result;  //get data

    // here comes the rest of the code:

    // Split the lines
    var lines = data.split('\n'); 
    .
    .
    .
    var chart = new Highcharts.Chart(options);
}  

和 HTML 部分:

<input type="file" id="csvfile" accept=".csv" name="files[]" >