如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？
- Susan Sarandon原創
- 2024-12-10 20:39:12336瀏覽
根據透過AJAX 要求的用戶輸入重新繪製Google 圖表
背景：
目標是更新Google 基於圖表用戶透過AJAX 從下拉式選單中進行的選擇，而無需重新載入整個頁面。
問題：
首次嘗試 AJAX 呼叫會產生錯誤：$ 未定義。這很可能是由於程式碼中缺少 jQuery 函式庫引用。
解決方案：
要解決該問題並啟用AJAX 功能，請按照以下步驟操作：
-
包含jQuery庫參考：
- 新增
-
使用JSON 格式取得資料：
- 修改getdata.php 檔案以JSON 格式傳回數據，因為Google 圖表期望這種資料格式
-
刪除Async: False屬性：
- 不要在 AJAX 請求中使用 async: false。這種同步執行可能會導致效能問題。
-
刪除內聯事件處理程序：
- 避免使用內聯事件處理程序，例如onchange。相反，使用透過 JavaScript 動態新增的事件偵聽器。
-
在圖表選項中只使用一次 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:
<html>
<head>
<!-- ... 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>
</head>
<body>
附加說明:
- 頁面完成後使用回調函數加載 Google 圖表是一個很好的做法正在加載。
- 考慮向 AJAX 請求添加錯誤處理以處理潛在的問題問題。
以上是如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
php JavaScript json jquery ajax html for format include Error using Attribute Event JS function this input https issue
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn