AJAX와 사용자가 선택한 테이블을 사용하여 Google 차트를 동적으로 다시 그리는 방법은 무엇입니까?

AJAX 요청을 통한 사용자 입력을 기반으로 Google 차트 다시 그리기

목표는 선택한 테이블에서 가져온 데이터로 Google 차트를 원활하게 업데이트하는 것입니다. AJAX를 사용하여 드롭다운 메뉴에서 하지만 jQuery $ 함수가 정의되지 않아 오류가 발생합니다.

문제 분석:

원본 코드는 URL에서 GET 요청을 사용하여 차트. 그러나 AJAX를 통해 데이터를 동적으로 소스링해야 하는 경우 스크립트 구조를 변경하지 않으면 필요한 데이터에 액세스할 수 없습니다.

솔루션 구현:

1. 웹페이지 수정:

   • 원하는 테이블을 선택하려면 드롭다운 메뉴를 추가하세요.
   • AJAX 데이터 검색을 트리거하려면 선택 변경 이벤트에 이벤트 리스너를 연결하세요.

2. AJAX 요청:

   • 지정된 PHP 파일인 getdata.php에서 원하는 데이터를 가져오는 AJAX 요청을 구현합니다.
   • PHP 파일의 응답이 Google 차트에서 허용되는 형식(예: JSON.

3. PHP 파일(getdata.php):

   • AJAX 요청에서 선택한 테이블 이름을 검색합니다.
   • 데이터베이스 테이블에서 데이터를 검색하고 Google 차트에서 사용할 수 있는 형식으로 지정 해석(예: JSON).
   • 포맷된 데이터를 JSON 형식으로 출력합니다.

4. 차트 다시 그리기 로직:

   • AJAX 요청에서 얻은 데이터를 사용하여 새로운 Google 시각화를 만듭니다. DataTable.
   • Google 시각화의 draw() 메소드를 활용하여 새 데이터로 차트를 업데이트합니다.

추가 고려 사항:

• 더 효율적인 코드를 위해 최신 JavaScript 프레임워크를 사용하는 것이 좋습니다.
• 보안 강화를 위해 직접 MySQL 호출 대신 서버 측 데이터베이스 드라이버를 사용하는 것이 좋습니다.

예 코드:

HTML/JavaScript:

$(document).ready(function() {
  $("#users").change(drawChart);

  function drawChart() {
    $.ajax({
      url: 'getdata.php',
      data: 'q=' + $("#users").val(),
      dataType: 'json',
      success: function(responseText) {
        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);
      }
    });
  }
});

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();

$table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

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);
?>

위 내용은 AJAX와 사용자가 선택한 테이블을 사용하여 Google 차트를 동적으로 다시 그리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!