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">

如果我设置＆＃34; location＆＃34;像这样的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[]" >

在highcharts中读取上传的csv文件

1 个答案: