如何使用 AJAX 和用户选择的表动态重绘 Google 图表？

根据通过 AJAX 请求的用户输入重新绘制 Google 图表

目标是使用从选定表中提取的数据无缝更新 Google 图表使用 AJAX 在下拉菜单中。但是，由于 jQuery $ 函数未定义，出现错误。

问题分析：

原代码在 URL 中使用 GET 请求来获取数据图表。然而，当需要通过 AJAX 动态获取数据时，如果不改变脚本结构就无法访问所需的数据。

解决方案实现：

1. 网页修改：

   • 添加用于选择所需表的下拉菜单。
   • 将事件侦听器附加到选择更改事件以触发 AJAX 数据检索。

2. AJAX 请求：

   • 实现 AJAX 请求以获取来自指定 PHP 文件 getdata.php 的所需数据。
   • 确保 PHP 文件的响应采用 Google 图表可接受的格式，例如 JSON。

3. PHP 文件(getdata.php):

   • 从 AJAX 请求中检索选定的表名称。
   • 从数据库表中检索数据并将其格式化为 Google 图表可以使用的格式解释（例如JSON）。
   • 输出JSON中的格式化数据

4. 图表重绘逻辑：

   • 使用从 AJAX 请求获取的数据创建新的 Google 可视化DataTable.
   • 利用Google Visualization的draw()方法来更新图表新数据。

其他注意事项：

• 建议使用现代 JavaScript 框架以更高效地组织代码.
• 考虑使用服务器端数据库驱动程序而不是直接 MySQL 调用以增加安全性。

示例代码：

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 和用户选择的表动态重绘 Google 图表？的详细内容。更多信息请关注PHP中文网其他相关文章！