Google Chart未显示数据问题咨询及代码排查请求

Let's walk through the problems in your code that are preventing the chart from displaying data, even though you don't see explicit errors:

1. Critical JavaScript AJAX Structure Error #

Your AJAX code is missing a success callback function—right now you're trying to process the JSON data directly inside the AJAX configuration object, which is invalid syntax. This means the code that creates the DataTable and draws the chart never actually runs when the AJAX request completes. You also haven't defined the jsonData variable you're trying to use.

Fixed JavaScript Code: #

google.charts.load('current',{'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart(){ 
    $.ajax({ 
        url: "http://localhost/test/get_temp.php", 
        dataType: "json", 
        // Add success callback to handle returned JSON data
        success: function(jsonData) {
            var data = new google.visualization.DataTable(jsonData); 
            var chart = new google.visualization.LineChart(document.getElementById('tempflot')); 
            chart.draw(data,{width: 800, height: 400}); 
        },
        // Add error handling to debug future issues
        error: function(xhr, status, error) {
            console.error('AJAX request failed:', error);
            console.error('Server response:', xhr.responseText);
        }
    }); 
}

2. Invalid Date Format for Google Charts #

Google Charts requires Date-type values to be formatted as Date(year, month, day, hours, minutes, seconds)—note that months are zero-indexed (0 = January, 11 = December). Your current PHP code splits the Time string on . and concatenates it directly, creating an invalid date string that JavaScript can't parse.

Fixed PHP Date Handling: #

while($row = mysqli_fetch_array($result)){ 
    $sub_array = array(); 
    // Parse the Time string into a DateTime object for reliable formatting
    $date = new DateTime($row["Time"]);
    
    // Extract components (adjust month to be zero-indexed for JS)
    $year = $date->format('Y');
    $month = $date->format('n') - 1;
    $day = $date->format('j');
    $hour = $date->format('G');
    $minute = $date->format('i');
    $second = $date->format('s');
    
    // Construct valid Google Charts Date string
    $sub_array[] = array( "v" => "Date($year, $month, $day, $hour, $minute, $second)" ); 
    // Ensure temperature is treated as a numeric value
    $sub_array[] = array( "v" => (float)$row["Temperature"] ); 
    $rows[] = array( "c" => $sub_array ); 
}

3. Minor Database Connection Optimization (Optional) #

Your db_connection function creates a new connection every time it's called and doesn't close it. While this isn't the root cause of your no-data issue, it's a good practice to fix:

function db_connection($query){ 
    $link = mysqli_connect("localhost","root","","hfjq_race_info"); 
    // Check for connection errors
    if (!$link) {
        die("Database connection failed: " . mysqli_connect_error());
    }
    $result = mysqli_query($link, $query);
    // Close connection after fetching results
    mysqli_close($link);
    return $result; 
}

How to Verify #

After making these changes:

1. Open your browser's developer tools (F12) and check the Console tab for any remaining errors.
2. Go to the Network tab, reload the page, and check the response from get_temp.php—it should return valid JSON with correctly formatted date values.

内容的提问来源于stack exchange，提问作者Elvis Fan