Highstocks(比较图表)输入数据而不使用getJSON

时间:2013-12-07 11:48:25

标签: jquery highstock

我使用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并且只保留函数时,没有加载任何内容。 怎么办?

2 个答案:

答案 0 :(得分:1)

更改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
                        }

                    });
                }

            });
    });

答案 1 :(得分:0)

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

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)删除下一个():

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