Question

我正在尝试将多个csv文件加载到一个图表中，以便我可以使用下钻。我不能使用具有多个列的单个csv，因为每个数据集具有不同的观察量或行数。我想出了如何使用嵌套的$ .get（）函数加载多个csv。但是，Highcharts只会绘制引用的最后一个数据集。我尝试用三种不同的版本编写代码，但所有版本都只绘制最后引用的数据集。我研究过Highcharts文档，但没有找到任何符合我要求的文档。

我正在使用Highcharts的数据模块来加载csv，因为它很简单。但是，我对其他可能需要文件解析的解决方案持开放态度。以下是我尝试过的三个不同版本的示例：

$.get('pref.csv', function(data1) {
    $.get('create.csv', function(data2) {
        $(chartID).highcharts({
            data: {
                csv: data2, data1
            },
            chart: {
                type: 'bar'
            }
        });
    });
});

或者

$.get('pref.csv', function(data1) {
    $.get('create.csv', function(data2) {
        $(chartID).highcharts({
            data: {
                csv: data2,
                csv: data1
            },
            chart: {
                type: 'bar'
            }
        });
    });
});

或者

$.get('pref.csv', function(data1) {
    $.get('create.csv', function(data2) {
        $(chartID).highcharts({
            data: {
                csv: data1
            },
            data: {
                csv: data2
            },
            chart: {
                type: 'bar'
            }
        });
    });
});

提前谢谢！

UPDATE 这是加载两个或多个csv文件以在带有xAxis日期的折线图中使用的解决方案。

data.csv
Date,Mean
2001-01-01,0
2001-02-01,2.9
2001-03-01,12.9
2001-04-01,27.2
2001-05-01,38.5
2001-06-01,43.9
2001-07-01,40.7
2001-08-01,45.8
2001-09-01,50.6

data2.csv
Date,Mean
2001-01-01,2
2001-02-01,1.6
2001-03-01,8.2
2001-04-01,13.6
2001-05-01,15.6
2001-06-01,17.1
2001-07-01,15.8
2001-08-01,17
2001-09-01,13.3

function parseCSV(csvFile) {
    // empty array for storing the chart data
    var data = [];
    // Split the lines
    var lines = csvFile.split('\n');
    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        if (lineNo != 0) {
            var items = line.split(',');
            // Insert date and player count into the series
            data.push([Date.parse(items[0]), parseFloat(items[1])]);
        }
    });
    return data
}


$.get('data.csv', function(data1) {
    $.get('data2.csv', function(data2) {
        // parse data1
        var series1 = parseCSV(data1)
            // parse data2
        var series2 = parseCSV(data2)

        $('container').highcharts({
            chart: {
                type: 'spline'
            },
            series: [{
                data: series1
            }, {
                data: series2
            }],
        });

    });
});

Answer 1

data.js模块需要单个文件。所以你需要通过ajax加载两个或更多文件（通过$ .get就像你一样）。然后准备自定义解析并创建系列数组的结构。

手册：

http://www.highcharts.com/docs/working-with-data/custom-preprocessing

如何使用Highcharts数据模块加载多个CSV

1 个答案: