在Google Charts API中包括php腳本

Question

我正在嘗試為Google圖表模擬數據庫（使用php）。 我在將php連接到Google圖表時遇到麻煩。 到目前為止，我嘗試使用JSON.stringify（），JSON.parse（）等。不幸的是，我沒有找到適當的方法來包含生成的數據。 我究竟做錯了什么？

我編寫了以下test.php以自動生成數據：

$fakedate = new DateTime('2014-01-01 14:05:00');
$testTime = $fakedate->format('[H,i,s]');
$testNb = rand ( 1000 , 5000 );

for ($i = 0; $i <= 47; $i++) 
{
    $chartsdata[$i] = array($testTime, $testNb);

    $fakedate->add(new DateInterval('PT10M'));
    $testTime = $fakedate->format('[H,i,s]');
    $testNb = rand ( 1000 , 5000 );
}       
echo json_encode($chartsdata);

另一方面，我編寫了以下柱形圖：

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() 
    {
        var data = new google.visualization.DataTable();
        data.addColumn('timeofday','testTime');
        data.addColumn('number','testNb');

        var jsonData = $.ajax({
            url: "test.php",
            dataType: "json",
            async: false
        }).responseText;

        var obj = JSON.stringify(jsonData);
        data.addRows(obj);

        var options = {
            title:  'Chart title',
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

</script>

Answer 1

這部分代碼似乎不正確：

var jsonData = $.ajax({
        url: "test.php",
        dataType: "json",
        async: false
    }).responseText;

您需要設置一個成功處理程序，而不是將jsonData分配給$ .ajax.responseText（我認為那里沒有這樣的屬性）

就像這樣：

$.ajax({
        url: "test.php",
        dataType: "json",
        async: false,
        success: function(data) {
             jsonData = data; 
        }
    });

由於調用是同步的，因此$ .ajax將被阻塞，因此在創建圖表之前不應調用成功處理程序。

Answer 2

有兩種方法可以在javascript中處理此問題。 首先，以您的代碼為基礎，要求您使用JSON.parse ：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('timeofday','testTime');
    data.addColumn('number','testNb');

    var jsonData = $.ajax({
        url: "test.php",
        dataType: "json",
        async: false
    }).responseText;

    var obj = JSON.parse(jsonData);
    data.addRows(obj);

    var options = {
        title:  'Chart title',
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

第二，在hrgui的答案中提到，是在AJAX調用中使用success處理程序：

function drawChart() {
    var jsonData = $.ajax({
        url: "test.php",
        dataType: "json",
        success: function (jsonData) {
            var data = new google.visualization.DataTable();
            data.addColumn('timeofday','testTime');
            data.addColumn('number','testNb');
            data.addRows(jsonData);

            var options = {
                title:  'Chart title',
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    });
}

通常首選第二種方法，但是兩者都可以。