如何根据用户下拉选择使用 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中文网其他相关文章！