在 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

这就是你如何绑定事件来加载文件：

$('#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[]" >