làm thế nào để làm việc với dữ liệu động và biểu đồ google?

Câu hỏi của bạn liên quan đến điều gì đó khiến tôi rất thất vọng:tài liệu API của Google không tuyệt vời! Đặc biệt, đối với API biểu đồ, về cơ bản trong tất cả các ví dụ của chúng, dữ liệu cho biểu đồ của chúng được mã hóa cứng trong trang và trong cuộc sống thực, về cơ bản, bạn sẽ luôn hiển thị dữ liệu được lưu trữ trong DB và được truyền tới trình duyệt.

1) Bạn cần một số mã trên máy chủ (tôi sử dụng PHP) để truy vấn cơ sở dữ liệu, "in" và truyền cấu trúc dữ liệu JSON / phức tạp là một đối tượng trong đó các thuộc tính là mảng chứa các đối tượng bổ sung với các thuộc tính và giá trị chính xác định dạng mà JavaScript Biểu đồ của Google mong đợi nhận được nó trong trình duyệt. Tôi đã làm nó như thế này:

$sql = "SELECT year,d_pop FROM metrics WHERE year IN ('1940','1950','1960','1970','1980')";

$sth = mysql_query($sql, $conn) or die(mysql_error());

//start the json data in the format Google Chart js/API expects to recieve it
$JSONdata = "{
           \"cols\": [
               {\"label\":\"Year\",\"type\":\"string\"},
               {\"label\":\"Detroit Population\",\"type\":\"number\"}
             ],
        \"rows\": [";

//loop through the db query result set and put into the chart cell values
while($r = mysql_fetch_assoc($sth)) {
   $JSONdata .= "{\"c\":[{\"v\": " . $r['year'] . "}, {\"v\": " . $r['d_pop']  ."}]},";

}    

//end the json data/object literal with the correct syntax
$JSONdata .= "]}";

echo $JSONdata;

2) Bạn cần nhận đối tượng JSON đó trong JavaScript của bạn trên trang của bạn và chuyển đối tượng đó sang JS Biểu đồ của Google. Tôi đã đưa vào JQuery và sau đó sử dụng phương thức AJAX của nó như thế này:

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

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {vAxis: {minValue: 0}});
}

Các đoạn mã của tôi tập trung vào các phần chính của việc truy vấn MySQL DB, tạo đối tượng JSON mà Google Charts API cần và nhận nó bằng JQuery và AJAX. Hy vọng điều này sẽ sáng tỏ!