Google 차트는 현재 특정 테이블에서 데이터를 가져오도록 구성되어 있습니다. GET 요청. 목표는 드롭다운 메뉴에서 사용자가 선택한 항목에 따라 AJAX를 통해 이 차트를 동적으로 업데이트하는 것입니다.
핵심 문제는 AJAX 업데이트에 대한 차트의 응답 부족에서 발생합니다. . JSON 형식 불일치로 인해 Google에서 차트를 렌더링하지 못할 수 있습니다.
PHP 코드 (getdata.php):
<?php require("dbconnect.php"); $db = mysql_connect($server, $user_name, $password); mysql_select_db($database); $sqlQuery = "SELECT * FROM ".$_GET['q']." WHERE Date(Time + INTERVAL 10 HOUR) = Date(UTC_TIMESTAMP() + INTERVAL 10 HOUR)"; $sqlResult = mysql_query($sqlQuery); $rows = array(); $table = array(); // Define column labels $table['cols'] = array( array('label' => 'Time', 'type' => 'string'), array('label' => 'Wind_Speed', 'type' => 'number'), array('label' => 'Wind_Gust', 'type' => 'number') ); // Populate data rows while ($row = mysql_fetch_assoc($sqlResult)) { $temp = array(); $temp[] = array('v' => (string) $row['Time']); $temp[] = array('v' => (float) $row['Wind_Speed']); $temp[] = array('v' => (float) $row['Wind_Gust']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; echo json_encode($table); ?>
HTML/Javascript:
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Wind Graph</title> <script src="http://www.google.com/jsapi"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> google.load('visualization', '1', { callback: function () { // Add event listener to select element $("#users").change(drawChart); function drawChart() { $.ajax({ url: 'getdata.php', // Use value from select element data: 'q=' + $("#users").val(), dataType: 'json', success: function (responseText) { // Use response from PHP for data table var data = new google.visualization.DataTable(responseText); new google.visualization.LineChart(document.getElementById('visualization')). draw(data, { curveType: 'none', title: 'Wind Chart', titleTextStyle: { color: 'orange' }, interpolateNulls: 1 }); }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown + ': ' + textStatus); } }); } }, packages: ['corechart'] }); </script> </head> <body>
주요 차이점:
위 내용은 드롭다운 메뉴의 사용자 입력을 기반으로 AJAX를 사용하여 Google 차트를 동적으로 업데이트하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!