根據(jù)通過 AJAX 請(qǐng)求的用戶輸入重新繪制 Google 圖表

目標(biāo)是使用從選定表中提取的數(shù)據(jù)無縫更新 Google 圖表使用 AJAX 在下拉菜單中。但是，由于 jQuery $ 函數(shù)未定義，出現(xiàn)錯(cuò)誤。

問題分析：

原代碼在 URL 中使用 GET 請(qǐng)求來獲取數(shù)據(jù)圖表。然而，當(dāng)需要通過 AJAX 動(dòng)態(tài)獲取數(shù)據(jù)時(shí)，如果不改變腳本結(jié)構(gòu)就無法訪問所需的數(shù)據(jù)。

解決方案實(shí)現(xiàn)：

1. 網(wǎng)頁修改：

   • 添加用于選擇所需表的下拉菜單。
   • 將事件偵聽器附加到選擇更改事件以觸發(fā) AJAX 數(shù)據(jù)檢索。

2. AJAX 請(qǐng)求：

   • 實(shí)現(xiàn) AJAX 請(qǐng)求以獲取來自指定 PHP 文件 getdata.php 的所需數(shù)據(jù)。
   • 確保 PHP 文件的響應(yīng)采用 Google 圖表可接受的格式，例如 JSON。

3. PHP 文件(getdata.php):

   • 從 AJAX 請(qǐng)求中檢索選定的表名稱。
   • 從數(shù)據(jù)庫表中檢索數(shù)據(jù)并將其格式化為 Google 圖表可以使用的格式解釋（例如JSON）。
   • 輸出JSON中的格式化數(shù)據(jù)

4. 圖表重繪邏輯：

   • 使用從 AJAX 請(qǐng)求獲取的數(shù)據(jù)創(chuàng)建新的 Google 可視化DataTable.
   • 利用Google Visualization的draw()方法來更新圖表新數(shù)據(jù)。

其他注意事項(xiàng)：

• 建議使用現(xiàn)代 JavaScript 框架以更高效地組織代碼.
• 考慮使用服務(wù)器端數(shù)據(jù)庫驅(qū)動(dòng)程序而不是直接 MySQL 調(diào)用以增加安全性。

示例代碼：

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 和用戶選擇的表動(dòng)態(tài)重繪 Google 圖表？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！