페이지를 다시 로드하지 않고 사용자 드롭다운 선택을 기반으로 AJAX를 사용하여 Google 차트를 동적으로 업데이트하려면 어떻게 해야 합니까?

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

배경:

목표는 Google 차트를 업데이트하는 것입니다. 전체를 다시 로드할 필요 없이 AJAX를 통해 드롭다운 메뉴에서 사용자 선택에 따라 페이지.

문제:

AJAX 호출의 초기 시도에서 오류가 발생합니다. $가 정의되지 않았습니다. 이는 코드에 jQuery 라이브러리 참조가 없기 때문일 가능성이 높습니다.

해결책:

문제를 해결하고 AJAX 기능을 활성화하려면 다음 단계를 따르십시오.

1. jQuery 라이브러리 포함 참조:

2. 데이터에 JSON 형식 사용:

   • JSON 형식으로 데이터를 반환하도록 getdata.php 파일을 수정합니다. , Google 차트에서는 데이터에 대해 이 형식을 예상하므로 tables.

3. Async: False 속성 제거:

   • AJAX 요청에 async: false를 사용하지 마세요. 이러한 동기식 실행은 성능 문제로 이어질 수 있습니다.

4. 인라인 이벤트 핸들러 제거:

   • 다음과 같은 인라인 이벤트 핸들러를 사용하지 마세요. onchange. 대신 JavaScript를 통해 동적으로 추가된 이벤트 리스너를 사용하세요.

5. 차트 옵션에서 hAxis 및 vAxis를 한 번만 사용하세요:

   • hAxis와 vAxis가 차트에 한 번만 나타나는지 확인하세요. options.

예제 코드:

getdata.php:

<?php // ... Same database connection and query logic ...

  $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' => $row['Time']);
    $temp[] = array('v' => floatval($row['Wind_Speed']));
    $temp[] = array('v' => floatval($row['Wind_Gust']));
    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  echo json_encode($table);
?>

HTML / JavaScript:

  
    <!-- ... Same as original code ... -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      google.load('visualization', '1', {
        callback: 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
                });
              }
            });
          }
        },
        packages: ['corechart']
      });
    </script>
  
  

추가 참고 사항:

• 페이지가 완료된 후 콜백 함수를 사용하여 Google 차트를 로드하는 것이 좋습니다. 로드 중입니다.
• 잠재적인 문제를 처리하려면 AJAX 요청에 오류 처리를 추가하는 것이 좋습니다.
• 사용 중인 Google 차트 버전과 jQuery 라이브러리 버전이 호환되는지 확인하세요.

위 내용은 페이지를 다시 로드하지 않고 사용자 드롭다운 선택을 기반으로 AJAX를 사용하여 Google 차트를 동적으로 업데이트하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!