Bagaimanakah saya boleh mengemas kini Carta Google secara dinamik menggunakan AJAX berdasarkan pemilihan lungsur turun pengguna tanpa muat semula halaman?

Lukis Semula Carta Google Berdasarkan Input Pengguna melalui Permintaan AJAX

Latar Belakang:

Matlamatnya adalah untuk mengemas kini carta Google berdasarkan pemilihan pengguna daripada menu lungsur melalui AJAX, tanpa perlu memuat semula keseluruhannya halaman.

Isu:

Percubaan awal pada panggilan AJAX menghasilkan ralat: $ tidak ditakrifkan. Ini berkemungkinan besar disebabkan oleh kekurangan rujukan perpustakaan jQuery dalam kod.

Penyelesaian:

Untuk menyelesaikan isu dan mendayakan kefungsian AJAX, ikut langkah berikut:

1. Sertakan Perpustakaan jQuery Rujukan:

   • Tambah

2. Gunakan Format JSON untuk Data:

   • Ubah suai fail getdata.php untuk mengembalikan data dalam format JSON , kerana carta Google menjangkakan format ini untuk data jadual.

3. Alih keluar Async: False Atribut:

   • Jangan gunakan async: false dalam permintaan AJAX. Pelaksanaan segerak ini boleh membawa kepada isu prestasi.

4. Alih keluar Pengendali Acara Sebaris:

   • Elakkan menggunakan pengendali acara sebaris seperti onchange. Sebaliknya, gunakan pendengar acara yang ditambahkan secara dinamik melalui JavaScript.

5. Gunakan hAxis dan vAxis Hanya Sekali dalam Pilihan Carta:

   • Pastikan hAxis dan vAxis muncul sekali sahaja dalam carta pilihan.

Contoh Kod:

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>
  
  

Nota Tambahan:

• Adalah amalan yang baik untuk menggunakan fungsi panggil balik untuk memuatkan carta Google selepas halaman selesai memuatkan.
• Pertimbangkan untuk menambah pengendalian ralat pada permintaan AJAX untuk mengendalikan potensi isu.
• Pastikan anda mengesahkan bahawa versi perpustakaan jQuery serasi dengan versi carta Google yang digunakan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengemas kini Carta Google secara dinamik menggunakan AJAX berdasarkan pemilihan lungsur turun pengguna tanpa muat semula halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!