Question

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

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

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

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

EDIT 我正在使用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，代码段：

$.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
           }]
        });
    });
});

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

1 个答案: