如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？

根據透過AJAX 要求的用戶輸入重新繪製Google 圖表

背景：

目標是更新Google 基於圖表用戶透過AJAX 從下拉式選單中進行的選擇，而無需重新載入整個頁面。

問題：

首次嘗試 AJAX 呼叫會產生錯誤：$ 未定義。這很可能是由於程式碼中缺少 jQuery 函式庫引用。

解決方案：

要解決該問題並啟用AJAX 功能，請按照以下步驟操作：

1. 包含jQuery庫參考：

   • 新增

2. 使用JSON 格式取得資料：

   • 修改getdata.php 檔案以JSON 格式傳回數據，因為Google 圖表期望這種資料格式

3. 刪除Async: False屬性：

   • 不要在 AJAX 請求中使用 async: false。這種同步執行可能會導致效能問題。

4. 刪除內聯事件處理程序：

   • 避免使用內聯事件處理程序，例如onchange。相反，使用透過 JavaScript 動態新增的事件偵聽器。

5. 在圖表選項中只使用一次 hAxis 和 vAxis：

   • 確保 hAxis 和 vAxis在圖表中只出現一次

範例程式碼：

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 請求添加錯誤處理以處理潛在的問題問題。

確保驗證 jQuery 函式庫版本與正在使用的 Google 圖表版本相容。

以上是如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！