AJAX リクエストによるユーザー入力に基づいて Google チャートを再描画 背景: 目標は Google チャートを更新することですAJAX を介してドロップダウン メニューからのユーザーの選択に基づいて、全体をリロードする必要はありません。 page. 問題: AJAX 呼び出しの最初の試行でエラーが生成されます: $ が定義されていません。これは、コード内に jQuery ライブラリ参照がないことが原因であると考えられます。 解決策: 問題を解決して AJAX 機能を有効にするには、次の手順に従います。 jQuery ライブラリを含める参照: 追加 < ;/スクリプト> HTML <head> へ</li></ul></li><li><p><strong>データに JSON 形式を使用する:</strong></p><ul><li>データを JSON 形式で返すように getdata.php ファイルを変更します。 、Google グラフではこの形式のデータが想定されているため、 tables.</li></ul></li><li><p><strong>Async: False 属性を削除します:</strong></p><ul><li>AJAX リクエストでは async: false を使用しないでください。この同期実行はパフォーマンスの問題を引き起こす可能性があります。</li></ul></li><li><p><strong>インライン イベント ハンドラーを削除します:</strong></p><ul><li>次のようなインライン イベント ハンドラーの使用は避けてください。変化中。代わりに、JavaScript を通じて動的に追加されたイベント リスナーを使用してください。</li></ul></li><li><p><strong>グラフ オプションで hAxis と vAxis を 1 回だけ使用する:</strong></p><ul><li> hAxis と vAxis がチャートに 1 回だけ表示されるようにするoptions.</li></ul></li></ol><p><strong>コード例:</strong></p><p><strong>getdata.php:</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><?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); ?><p><strong>HTML / JavaScript:</strong></p> <pre><html> <head> <!-- ... Same as original code ... --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 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'] }); ログイン後にコピー 追加メモ: ページの終了後にコールバック関数を使用して Google グラフをロードすることをお勧めします。ロード中。 潜在的な可能性を処理するために、AJAX リクエストにエラー処理を追加することを検討してください。 jQuery ライブラリのバージョンが、使用されている Google チャートのバージョンと互換性があることを必ず確認してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
