Question

我正在尝试使用来自XMLHttpRequest的数据绘制MotionChart。如果MotionChart的数据硬编码如下例所示，则会正确显示。

function drawMotChart(dataObject) {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fruit');
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addColumn('string', 'Location');
    data.addRows([
      ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
      ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
      ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
      ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
      ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
      ['Bananas', new Date (1989,6,1), 788,  617, 'West']
    ]);

    var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 600, height:300});
}

但我想从php获取数据。所以我尝试了以下内容。在网页标题中我有：

function SendParameters() {
    document.getElementById("chart_div").innerHTML ="";

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
                document.getElementById("ShowAjax").innerHTML = "Just to see the incomming data:<br>"+xmlhttp.responseText;
                DataFromAjax = xmlhttp.responseText;
                drawMotChart(DataFromAjax);
            }
        }
        xmlhttp.open("GET", "L_GetDataAjax.php?Group=Main", true);
        xmlhttp.send();
}

function drawMotChart(dataObject) {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fruit');
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addColumn('string', 'Location');
    data.addRows([dataObject]);

    var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 600, height:300});
}

L_GetDataAjax.php文件是这样的：

PHP

$DataToSend="['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
             ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
             ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
             ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
             ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
             ['Bananas', new Date (1989,6,1), 788,  617, 'West']";
echo $DataToSend;

但在这种情况下没有图表。

所以我的问题是：如何将XMLHttpRequest中的数据添加到图表中？

将数据从php发送到JS以获取谷歌动态图表

0 个答案: