Highstocks（比较图表）输入数据而不使用getJSON

Question

我正在使用 highstocks.js 创建比较图，但由于我一次性计算了三条曲线的数据，因此将它们放入一个变量中并将它们拆分以获得我的个人 json。

msg=[[1384972200000,2],[1385058600000,4],[1385145000000,5]]~~[[1384972200000,0],[1385058600000,0]]~~[[1384972200000,1],[1385058600000,1],[1385145000000,1]]
var data = msg.split("~~");

由于我有三条曲线，因此我有一个不使用 getJSON 的循环，因此我已将其删除并仅调用函数

 $(function() {
            var seriesOptions = [],
                yAxisOptions = [],
                seriesCounter = 0,
                names = ['Requested', 'Submitted', 'Approved'],
                colors = Highcharts.getOptions().colors;
                var data;                
               $.ajax({
                    type: "POST",
                    url: "highstockPPAP.cgi",                      
                    })
                    .done(function( msg ) {                        
                    data = msg.split("~~");                       
               });

            $.each(names, function(i, name) {
            //as Iam not using this getJSON how to remove it               
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',function test() {
               var newdata=JSON.parse(data[i]);
                    seriesOptions[i] = {
                        name: name,
                        data: newdata                          
                    }; 


                    // As we're loading the data asynchronously, we don't know what order it will arrive. So
                    // we keep a counter and create the chart when all the data is loaded.
                    seriesCounter++;

                    if (seriesCounter == names.length) {
                        createChart();
                    }
                });
            });



            // create the chart when all data is loaded
            function createChart() {
                Highcharts.setOptions({

                    global: {
                        useUTC: false
                    }
                });

                $('#container').highcharts('StockChart', {
                    chart: {
                    },

                    rangeSelector: {
                        selected: 4
                    },
                    xAxis: {
                        type: 'datetime',
                         ordinal: false, //this sets the fixed time formats
                    },
                    yAxis: {
                        //labels: {
                        //  formatter: function() {
                                //return(this.value);
                            //  return (this.value > 0 ? '+' : '') + this.value + '%';
                        //  }
                        //},
                        plotLines: [{
                            value: 0,
                            width: 2,
                            color: 'silver'
                        }]
                    },

                    plotOptions: {
                        //series: {
                        //  compare: 'percent'
                        //}
                    },

                    tooltip: {
                //      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                        valueDecimals: 0
                    },

                    series: seriesOptions,
                    exporting: {
                        enabled: false
                    }

                });
            }

        });
});

当我删除 getJSON 并只保留函数时，没有加载任何内容。 怎么办？

Answer 1

好吧，让我们尝试更改代码中的一些内容：

1) 将您的消息更改为类似的内容：

    msg= [
         [ [[1384972200000,2],[1385058600000,4],[1385145000000,5]] ], 
         [ [[1384972200000,0],[1385058600000,0]] ],
         [ [[1384972200000,1],[1385058600000,1],[1385145000000,1]] ]
         ]

所以您将拥有三个数组，这将是正确的 JSON。然后您将根本不需要使用拆分和解析您的数据。

2) .ajax() 完成后创建图表，见：

           $.ajax({
                type: "POST",
                url: "highstockPPAP.cgi",                      
           }).done(function( data ) {                        
                $.each(data, function(i, d) {
                    seriesOptions[i].data = d;
                });                     
                createChart();
           });

3) 删除 next each():

$.each(names, function(i, name) { ... } );

Answer 2

更改 json 并将所有值传递到一个 json 中

[[[1384972200000,2],[1385058600000,4],[1385145000000,5]],[[1384972200000,0],[1385058600000,0]],[[1384972200000,1],[1385058600000,1],[1385145000000,1]]]

并使用以下链接access the json elements as array最终的javascript如下：

 $( document ).ready(function() {
            $(function() {
                var seriesOptions = [],
                    yAxisOptions = [],
                    seriesCounter = 0,
                    names = ['Requested', 'Submitted', 'Approved'],
                    colors = Highcharts.getOptions().colors;                      

                 $.getJSON('highstockPPAP.cgi',function (data) {
                 alert(data[0]);           
                 $.each(names, function(i, name) {
                            seriesOptions[i] = {
                            name: name,
                            data: data[i]                            
                        };

                        // As we're loading the data asynchronously, we don't know what order it will arrive. So
                        // we keep a counter and create the chart when all the data is loaded.
                        seriesCounter++;

                        if (seriesCounter == names.length) {
                            createChart();
                        }
                    });
                });    

                // create the chart when all data is loaded
                function createChart() {
                    Highcharts.setOptions({

                        global: {
                            useUTC: false
                        }
                    });

                    $('#container').highcharts('StockChart', {
                        chart: {
                        },

                        rangeSelector: {
                            selected: 4
                        },
                        xAxis: {
                            type: 'datetime',
                             ordinal: false, //this sets the fixed time formats                           
                        },
                        yAxis: {

                            plotLines: [{
                                value: 0,
                                width: 2,
                                color: 'silver'
                            }]
                        },

                        plotOptions: {

                        },

                        tooltip: {

                            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                            valueDecimals: 0
                        },

                        series: seriesOptions,
                        exporting: {
                            enabled: false
                        }

                    });
                }

            });
    });