从 2 个不同的 csv 文件加载 highcharts 中的数据

Question

我正在尝试找出是否可以使用 2 个来源获得图表（一个用于类别，另一个用于绘制的实际数据。

我发现自己经常需要为不同的系列使用相同的类别；但我不能在图表本身中编码，因为它们不是全球性的。以温度传感器数据为例：它使用摄氏度，我的类别适合特定的用户案例；这适用于我所有的温度传感器，但如果我需要使用来自压力传感器的数据，那么我需要更改类别中的测量单位和其他参数。

缓解；我可以简单地即时编写函数，直接从服务器生成大量特定的 csv 文件；但我认为我可以从服务器已经返回的文件中获取一些零碎的东西。

但我找不到有关如何将不同文件设置为类别和系列的源的示例。这是可能的还是我应该只制作大量的临时单个 csv 文件？

编辑 我正在使用 highcharts 网站上的标准示例来加载 csv 文件；它不在 JSFiddle 上，所以我可以将链接粘贴到该 Web 示例：http://www.highcharts.com/studies/data-from-csv.htm

我所做的是复制 $.get 函数，使用不同的文件名，但它不起作用；所以我也尝试更改数据名称，但也没有用：

    $(document).ready(function() {


                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'Fruit Consumption'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Units'
                        }
                    },
                    series: []
                };

                /*
                 Load the data from the CSV file. This is the contents of the file:

                    Apples,Pears,Oranges,Bananas,Plums
                    John,8,4,6,5
                    Jane,3,4,2,3
                    Joe,86,76,79,77
                    Janet,3,16,13,15

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

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

                        // the rest of the lines contain data with their name in the first position
                        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);

                        }

                    });

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

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

                        // the rest of the lines contain data with their name in the first position
                        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);
                });


            });

Answer 1

在这里您可以找到如何将三个文件作为系列加载的示例：http://www.highcharts.com/stock/demo/compare

所以唯一的区别是您只使用一个系列，而第二个文件将用于类别数据。

在上述解决方案中添加了一些全局计数器，用于在收到所有文件后呈现图表。

第二种解决方案是在第一个回调中调用第二个 AJAX，sn-p：

$.getJSON(url1, function(data) {
    $.getJSON(url2, function(data2) {
        // create chart here
    });
});

编辑：

如果您有两个 CSV 文件，这就是您需要更改的内容：

$.get(url1, function(data1) {
    $.get(url2, function(data2) {
        // parse data1
        var parsedData1 = ...
        // parse data2
        var parsedData2 = ...

        $("#container").highcharts({
           series: [{
               data: parsedData1
           }, {
               data: parsedData2
           }]
        });
    });
});