如何使用從服務器返回的JSON數據動態填充Google條形圖的數據

Question

我正在使用ajax從服務器獲取json數據，以動態填充Google條形圖的數據。 我最多可能從服務器返回20個數據點或返回0個數據點。我在服務器端使用php將數據格式化為json。 當我有20個數據點要返回時，代碼運行良好，但是我想用返回的數據點數來動態構建數據變量。 我嘗試了不同的方法來動態填充數組，但無法正常工作。 從服務器返回的json數據示例為：

date0: "05/Sep"
date1: "12/Sep"
date2: "17/Apr"
date3: "24/Apr"
date4: "01/May"
date5: "08/May"
date6: "15/May"
date7: "22/May"
rounds_found: 8
score0: "48"
score1: "48"
score2: "45"
score3: "45"
score4: "47"
score5: "49"
score6: "44"
score7: "50"

 $("#ajax_image").show();  // Show ajax spinner
    $.ajax({
        url: 'ajax.php',
        dataType: "json",
        data: { a: "getBarChart", player_id: $("#player_id").val() },
        success: function(data) { //called when successful  
            $("#ajax_image").hide();  // Hide ajax spinner          
            // Some raw data (not necessarily accurate)

            var data = google.visualization.arrayToDataTable([
              ['Date','Score' ],


                                // dynamically add data here

            ]);

            var options = {
              title : 'Last 20 Rounds Played',
              vAxis: {title: "Scores"},
              seriesType: "bars",
              series: {1: {type: "line"}}
            };

Elements in arrayToDataTable should look like this:
[String(data.date0), parseInt(data.score0)],
[String(data.date1), parseInt(data.score1)],
[String(data.date2), parseInt(data.score2)],
etc.

Answer 1

對於動態加載，您可以使用以下代碼

var bcData = new google.visualization.DataTable();

bcData.addColumn('string', 'Date');
bcData.addColumn('number', 'Score');

for (var i = 0; i < data.rounds_found; i++) {
    bcData.addRow([data['date' + i], parseInt(data['score' + i])]);
}

參見不帶ajax代碼的jsbin中的示例 。