Javascript 将xmlhttprequested对象传递给另一个函数_Javascript_Xmlhttprequest_Google Visualization

Javascript 将xmlhttprequested对象传递给另一个函数

javascript google-visualization

Javascript 将xmlhttprequested对象传递给另一个函数,javascript,xmlhttprequest,google-visualization,Javascript,Xmlhttprequest,Google Visualization,我是web开发新手，我正在尝试在下面的代码中的drawChart（）中绘制Google图表为了绘制图表，我需要传递一些数据，然后从后端的数据库中获取数据（使用Python），并在下面的GetData（）函数中请求它我成功地独立完成了这两项任务，但我不确定如何在不丢失模块性的情况下将其组合在一起换句话说，在函数GetData（）中，如何将ret传递给drawChart（）函数GetData（） { //IE7+、Firefox、Chrome、Opera、Safari的代码 if（windo

我是web开发新手，我正在尝试在下面的代码中的

drawChart（）中绘制Google图表
为了绘制图表，我需要传递一些数据，然后从后端的数据库中获取数据（使用Python），并在下面的GetData（）
函数中请求它
我成功地独立完成了这两项任务，但我不确定如何在不丢失模块性的情况下将其组合在一起
换句话说，在函数GetData（）
中，如何将ret
传递给drawChart（）

函数GetData（）
{
//IE7+、Firefox、Chrome、Opera、Safari的代码
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
else//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
var-ret；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
ret=JSON.parse（xmlhttp.responseText）；
}
}
open（“GET”，“/submit222”，true）；
xmlhttp.send（）；
返回ret；
}
函数绘图图（）
{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'number of Requests'）；
var myData=GetData（）；
对于（var i=0；i，因为请求是异步的，所以必须重新构造程序的工作方式：
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>

函数getData（回调）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
if（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）；
}else{//IE6、IE5的代码
xhr=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhr.open（“GET”、“/submit222”、true）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
回调（JSON.parse（xhr.responseText））；
}
};
xhr.send（）；
}
功能绘图图（myData）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'number of Requests'）；
变量行=新数组（5）；
对于（变量i=0；i
我想看一下这个答案会对你有帮助：很好！不过，我有一个问题。图表看起来不错，但控制台会打印“未捕获错误：给定的每一行必须为null或数组。”当我更改行[I]=[new Date（myData[I][0]），myData[I][1]；
到行。推送（[new Date（myData[I][0]）），myData[i][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>