Wie kann ich ein Google-Diagramm mithilfe von AJAX basierend auf der Dropdown-Auswahl des Benutzers dynamisch aktualisieren, ohne die Seite neu laden zu müssen?

Google-Diagramm basierend auf Benutzereingaben per AJAX-Anfrage neu zeichnen

Hintergrund:

Das Ziel besteht darin, ein Google-Diagramm zu aktualisieren basierend auf der Benutzerauswahl aus einem Dropdown-Menü über AJAX, ohne dass das Ganze neu geladen werden muss Seite.

Problem:

Der erste Versuch des AJAX-Aufrufs erzeugt einen Fehler: $ ist nicht definiert. Dies liegt höchstwahrscheinlich daran, dass im Code kein Verweis auf die jQuery-Bibliothek vorhanden ist.

Lösung:

Um das Problem zu beheben und die AJAX-Funktionalität zu aktivieren, führen Sie die folgenden Schritte aus:

1. Fügen Sie eine jQuery-Bibliothek hinzu Referenz:

2. JSON-Format für Daten verwenden:

   • Ändern Sie die Datei getdata.php, um Daten im JSON-Format zurückzugeben , da Google Charts dieses Format für Daten erwartet Tabellen.

3. Async: False-Attribut entfernen:

   • Async: false nicht in der AJAX-Anfrage verwenden. Diese synchrone Ausführung kann zu Leistungsproblemen führen.

4. Inline-Ereignishandler entfernen:

   • Vermeiden Sie die Verwendung von Inline-Ereignishandlern wie onchange. Verwenden Sie stattdessen Ereignis-Listener, die dynamisch über JavaScript hinzugefügt werden.

5. Verwenden Sie hAxis und vAxis nur einmal in den Diagrammoptionen:

   • Stellen Sie sicher, dass hAxis und vAxis nur einmal im Diagramm erscheinen Optionen.

Beispielcode:

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>
  
  

Zusätzliche Hinweise:

• Es empfiehlt sich, eine Rückruffunktion zu verwenden, um Google-Diagramme zu laden, nachdem die Seite fertig ist wird geladen.
• Erwägen Sie, der AJAX-Anfrage eine Fehlerbehandlung hinzuzufügen, um potenzielle Probleme zu behandeln.
• Make Stellen Sie sicher, dass die Version der jQuery-Bibliothek mit der verwendeten Version von Google Charts kompatibel ist.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Google-Diagramm mithilfe von AJAX basierend auf der Dropdown-Auswahl des Benutzers dynamisch aktualisieren, ohne die Seite neu laden zu müssen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!