Question

我想加载x csv文件并将数据渲染到折线图。加载1个csv文件并创建折线图已经很好了。

我的csv文件：

Date,PV,Energy
1355100420,0.000,0.851
1355100480,0.000,0.841
1355100540,0.000,1.000
1355100600,0.000,0.984
1355100660,0.000,1.006
1355100720,0.000,2.769
1355100780,0.000,2.791

我的问题：csv文件的数量是多种多样的，正确的顺序很重要，因为x轴是我的时间轴，我在csv的第一列中有日期/时间。

阅读单个csv：

$.get(csv_file, function(data) {
    var series = [];
    // Split lines
    var lines = data.toString().split('\n');
    // For each line, split the record into seperate attributes
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        // first line contains the series names
        if (lineNo === 0) {
            for (var i = 1; i < items.length; i++) {
                series.push({
                    name : items[i],
                    data : [],
                    dataGrouping : {
                        enabled : false
                    }
                });
            }
        } else {
            for (var i = 1; i < items.length; i++) {
                // get the serie
                var serie = series[i - 1];
                serie.data.push([parseFloat(items[0] * 1000), parseFloat(items[i])]);
            }
        }
    });
    chart = new Highcharts.StockChart({
        chart : {
            renderTo : container_id,
            type : 'line',
            reflow : true,
        },
        xAxis : {
            type : 'datetime'
        },
        series : series
    });
});

但是如何以正确的顺序读取多个csv文件？

非常感谢！

Answer 1

您可以使用一些get（）函数并按正确的顺序推送数据。

使用2个数据csv。

的示例

JS

var options = {
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
    },
    title: {
        text: ''
    },
    series: []
};
$.get('data1.csv', function (data) {
    // Split the lines
    options.series.push({
        name: 'aaa',
        data: []
    });

    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        options.series[0].data.push([
        parseFloat(items[0]),
        parseFloat(items[1])]);
    });
});

$.get('data2.csv', function (data) {
    // Split the lines
    options.series.push({
        data: []
    });
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        options.series[1].data.push([
        parseFloat(items[0]),
        parseFloat(items[1])]);
    });
    var chart = new Highcharts.Chart(options);
});

CSV1

    16.40803,22.670
16.40772,20.840
16.40740,20.327
16.40709,21.532
16.40678,24.302
16.40646,26.108

CSV2

    16.43353,  -19.142
16.43322 , -18.813
16.43290  ,-19.157
16.43259  ,-19.417
16.43228  ,-19.428
16.43196  ,-19.747

Answer 2

她可以找到如何加载多个文件的示例：http://www.highcharts.com/stock/demo/compare

区别在于，您需要首先解析这些值（正如您在第一篇文章中所做的那样），并将它们推送到一个数组中。下一步就是对该数组进行排序（简单data.sort(function(a,b){ return a[0] - b[0]; })应该足够）并将排序后的数据放入series.data。

在一个图表中加载多个csv文件（正确的顺序）

2 个答案: