如何根据用户下拉选择使用 AJAX 动态更新 Google 图表，而无需重新加载页面？
- Susan Sarandon原创
- 2024-12-10 20:39:12333浏览
根据通过 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 请求添加错误处理以处理潜在的问题问题。
- 确保验证 jQuery 库版本与正在使用的 Google 图表版本兼容。
以上是如何根据用户下拉选择使用 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