AJAX リクエストによるユーザー入力に基づいて Google チャートを再描畫

目標(biāo)は、選択したテーブルから取得したデータで Google チャートをシームレスに更新することですAJAX を使用したドロップダウン メニュー。ただし、jQuery $ 関數(shù)が定義されていないため、エラーが発生します。

問題分析:

元のコードは、URL で GET リクエストを使用して、チャート。ただし、データを AJAX 経由で動(dòng)的に取得する必要がある場(chǎng)合、スクリプト構(gòu)造を変更しないと必要なデータにアクセスできません。

ソリューションの実裝:

1. ウェブページ変更:

   • ドロップダウン メニューを追加して、目的のテーブルを選択します。
   • AJAX データ取得をトリガーするために、選択変更イベントにイベント リスナーをアタッチします。

2. AJAXリクエスト:

   • 指定された PHP ファイル getdata.php から必要なデータを取得する AJAX リクエストを?qū)g裝します。
   • PHP ファイルからの応答がGoogle チャートで受け入れられる形式（例） JSON.

3. PHP ファイル (getdata.php):

   • AJAX リクエストから選択されたテーブル名を取得します。
   • データベーステーブルからデータを取得し、Google が指定する形式にフォーマットします。チャートは解釈できます (JSON など)。
   • フォーマットされたデータを JSON 形式で出力します。

4. チャート再描畫ロジック:

   • AJAX リクエストから取得したデータを使用して、新しい Google Visualization DataTable。
   • Google Visualization のdraw() メソッドを使用して、新しいデータでグラフを更新します。

追加の考慮事項(xiàng):

• 最新の JavaScript フレームワークを使用することをお?jiǎng)幛幛筏蓼?。より効率的なコード構(gòu)成。
• セキュリティを強(qiáng)化するには、MySQL を直接呼び出す代わりにサーバー側(cè)のデータベース ドライバーを使用することを検討してください。

例コード:

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 チャートを動(dòng)的に再描畫する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。