问题描述

highcharts中为什么不能使用ajax传回来的数组？ 求帮助 ，好几天解决不了

$(function(){
var idaccount=window.parent.frames["upFrame"].idaccount;
var xmlhttp=new XMLHttpRequest();
//ajax返回值

    var arr;

    xmlhttp.open("GET","ajaxuserbloodpressure.php?idaccount="+idaccount,true);
        xmlhttp.send();

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState== 4 && xmlhttp.status== 200 )
{

            arr=xmlhttp.responseText;
            var arr_obj=eval(arr); //ajax返回值变换为json数组对象，arr_obj这个时候为 //数组5，3，7
            var ceshi=[1,5,54];

$('#lineChart').highcharts({
chart: {
type: 'line' ,
zoomType: 'x'
},
title: {
text: '曲线'
},

yAxis: {
min: 0,
title: {
text: '值'
}
},

               plotOptions: {
                   column: {
                       pointPadding: 0.2,
                       borderWidth: 0
                   }
               },
               series: [{
                   name: '高',
                  data: [110,7,4]   //如果在这里用 arr_obj，就不能画图，如果用data:ceshi
                                                      //就可以画图
               }, {
                   name: '低',
                   data: [2,4,1]

               }]
           }); 

            }

        }

});

解决方案

将你的ajax改为同步的，而且你的arr_obj是内部变量，外部访问不了，直接使用arr变量就行了

 var xmlhttp=new XMLHttpRequest();
//ajax返回值
    var arr;
    xmlhttp.open("GET","ajaxuserbloodpressure.php?idaccount="+idaccount,false);///同步，不需要回调
        xmlhttp.send();
arr=xmlhttp.responseText;
arr=eval('('+arr+')')/////////
$('#lineChart').highcharts({ ///.....
series: [{
                   name: '高',
                  data:arr////////////////////
               }

解决方案二：

我的状态转换函数onreadystatechange里面包含$('#lineChart').highcharts({///// ，也就是异步回调之后才会作图，我可以把它调整到前面。如下
$(function(){

  var idaccount=window.parent.frames["upFrame"].idaccount;
   var xmlhttp=new XMLHttpRequest();
    var arr;

    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState== 4 && xmlhttp.status== 200 )
        {
            arr=xmlhttp.responseText;
            arr=eval('('+arr+')');

            var ceshi=[1,5,54];
            alert(arr);

            $('#lineChart').highcharts({
                chart: {
                    type: 'line' ,
                    zoomType: 'x'
                },
                title: {
                    text: '曲线'
                }, 

                yAxis: {
                    min: 0,
                    title: {
                        text: '值'
                    }
                }, 

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '高',
                    data: arr

                }, {
                    name: '低',
                    data: [2,4,1]

                }]
            }); 

            }

        }

    xmlhttp.open("GET","ajaxuserbloodpressure.php?idaccount="+idaccount,true);
        xmlhttp.send();

})

解决方案三：

我的状态转换函数onreadystatechange里面包含$('#lineChart').highcharts({///// ，也就是异步回调之后才会作图，我可以把它调整到前面。如下
$(function(){

  var idaccount=window.parent.frames["upFrame"].idaccount;
   var xmlhttp=new XMLHttpRequest();
    var arr;

    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState== 4 && xmlhttp.status== 200 )
        {
            arr=xmlhttp.responseText;
            arr=eval('('+arr+')');

            var ceshi=[1,5,54];
            alert(arr);

            $('#lineChart').highcharts({
                chart: {
                    type: 'line' ,
                    zoomType: 'x'
                },
                title: {
                    text: '曲线'
                }, 

                yAxis: {
                    min: 0,
                    title: {
                        text: '值'
                    }
                }, 

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '高',
                    data: arr

                }, {
                    name: '低',
                    data: [2,4,1]

                }]
            }); 

            }

        }

    xmlhttp.open("GET","ajaxuserbloodpressure.php?idaccount="+idaccount,true);
        xmlhttp.send();

})