ページをリロードせずに、ユーザーのドロップダウン選択に基づいて AJAX を使用して Google チャートを動的に更新するにはどうすればよいですか?

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

背景:

目標は Google チャートを更新することですAJAX を介してドロップダウン メニューからのユーザーの選択に基づいて、全体をリロードする必要はありません。 page.

問題:

AJAX 呼び出しの最初の試行でエラーが生成されます: $ が定義されていません。これは、コード内に jQuery ライブラリ参照がないことが原因であると考えられます。

解決策:

問題を解決して AJAX 機能を有効にするには、次の手順に従います。

1. jQuery ライブラリを含める参照:

   • 追加

2. データに JSON 形式を使用する:

   • データを JSON 形式で返すように getdata.php ファイルを変更します。 、Google グラフではこの形式のデータが想定されているため、 tables.

3. Async: False 属性を削除します:

   • AJAX リクエストでは async: false を使用しないでください。この同期実行はパフォーマンスの問題を引き起こす可能性があります。

4. インライン イベント ハンドラーを削除します:

   • 次のようなインライン イベント ハンドラーの使用は避けてください。変化中。代わりに、JavaScript を通じて動的に追加されたイベント リスナーを使用してください。

5. グラフ オプションで hAxis と vAxis を 1 回だけ使用する:

   • hAxis と vAxis がチャートに 1 回だけ表示されるようにするoptions.

コード例:

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 中国語 Web サイトの他の関連記事を参照してください。