2014-03-29 43 views
0

我是網絡開發新手,我正在嘗試在下面的代碼中繪製一個Google ChartdrawChart()函數。將xmlhttprequested對象傳遞給另一個函數

爲了繪製圖表,我需要傳遞一些數據,並從後端數據庫中獲取數據(使用Python),並在GetData()函數中請求它。

我成功地完成了這兩項任務,但我不確定如何將它們放在一起而不會丟失模塊性。

換句話說,在函數GetData()中,如何將ret傳遞給drawChart()

function GetData() 
{ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    if(window.XMLHttpRequest) { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    var ret; 

    xmlhttp.onreadystatechange=function() 
    { 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      ret = JSON.parse(xmlhttp.responseText); 
     } 
    } 

    xmlhttp.open("GET","/submit222", true); 
    xmlhttp.send(); 
    return ret; 
} 

function drawChart() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Number of Requests'); 

    var myData = GetData(); 

    for(var i=0; i<5; i++) { 
     data.addRows([ 
      new Array(new Date(myData[i][0]), Number(myData[i][1])) 
     ]); 
    } 

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); 

    var options = { 
     displayAnnotations: true, 
    }; 

    chart.draw(data, options); 
} 
</script> 
</head>    
    <body onload="GetData()"> 
     <div id='chart_div' style='width: 900px; height: 500px;'></div> 
    </body> 
</html> 
""" 
+0

我認爲考慮看看這個答案對你有所幫助:HTTP://計算器。 com/questions/14220321 /如何返回-Ajax-call-response/14220323#14220323 – 76484

回答

1

因爲請求是異步的,你必須調整你的程序是如何工作的:

function getData(callback) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    if (window.XMLHttpRequest) { 
     xhr = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xhr.open("GET", "/submit222", true); 

    xhr.onreadystatechange = function(){ 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      callback(JSON.parse(xhr.responseText)); 
     } 
    }; 

    xhr.send(); 
} 

function drawChart(myData) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Number of Requests'); 

    var rows = new Array(5); 
    for (var i = 0; i < rows.length; i++) { 
     row[i] = [ new Date(myData[i][0]), myData[i][1] ]; 
    } 

    data.addRows(rows); 

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); 

    var options = { 
     displayAnnotations: true, 
    }; 

    chart.draw(data, options); 
} 
</script> 
</head>    
    <body onload="getData(drawChart)"> 
     <div id='chart_div' style='width: 900px; height: 500px;'></div> 
    </body> 
</html> 
+0

美麗!但是,我有一個問題。圖表看起來不錯,但控制檯打印出'未捕獲錯誤:給出的每一行都必須爲空或數組'。當我改變'行[我] = [新日期(myData [我] [0]),myData [i] [1]];''rows.push([新日期(myData [i] [0]) ,myData [i] [1]]);',沒有錯誤,但圖表看起來有點滑稽。你知道爲什麼會發生這種情況嗎?謝謝!! – user2418202