如何使用 AJAX 和 PHP 动态重绘 Google 图表？

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

问题：

你想要根据下拉菜单中选定的表格动态更新 Google 图表，但在以下情况下遇到错误尝试通过 AJAX 获取数据。

解决方案：

要使用 AJAX 和外部数据正确重绘图表，请考虑以下步骤：

1。 PHP 中的数据准备 (getdata.php)：

• 使用 PHP 从数据库中获取数据并处理 AJAX 请求。
• 以 JSON 格式回显数据，即与Google的数据表兼容。
• 确保适当的列标签、类型和数据结构。

示例：

<?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);
?>

2. HTML/JavaScript 中的 AJAX 请求：

• 使用 jQuery AJAX 从 getdata.php 端点获取数据并处理响应。
• 成功后，创建一个数据表并使用 Google Visualization 绘制图表API.

示例：

<script type="text/javascript">
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
        });
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown + ': ' + textStatus);
      }
    });
  }
}});
</script>

注释：

• 避免使用 async: false在 AJAX 请求中，因为它可以阻止
• 在图表选项对象中仅移动一次 hAxis 和 vAxis 选项。
• 确保您在 HTML 中为 onchange 事件处理程序使用正确的选择器。

以上是如何使用 AJAX 和 PHP 动态重绘 Google 图表？的详细内容。更多信息请关注PHP中文网其他相关文章！