Rumah > pembangunan bahagian belakang > tutorial php > Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan PHP?

Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan PHP?

Susan Sarandon
Lepaskan: 2024-12-05 14:02:17
asal
523 orang telah melayarinya

How to Redraw a Google Chart Dynamically Using AJAX and PHP?

Lukis Semula Carta Google Berdasarkan Input Pengguna melalui Permintaan AJAX

Masalah:

Anda mahu untuk mengemas kini carta Google secara dinamik berdasarkan jadual yang dipilih daripada menu lungsur, tetapi anda menghadapi ralat semasa cuba mengambil data melalui AJAX.

Penyelesaian:

Untuk melukis semula carta dengan betul menggunakan AJAX dan data luaran, pertimbangkan langkah berikut:

1 . Penyediaan Data dalam PHP (getdata.php):

  • Gunakan PHP untuk mengambil data daripada pangkalan data anda dan mengendalikan permintaan AJAX.
  • Gemakan data dalam format JSON iaitu serasi dengan jadual data Google.
  • Pastikan label lajur, jenis dan data yang sesuai struktur.

Contoh:

<?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);
?>
Salin selepas log masuk

2. Permintaan AJAX dalam HTML/JavaScript:

  • Gunakan jQuery AJAX untuk mengambil data daripada titik akhir getdata.php dan memproses respons.
  • Setelah berjaya, cipta jadual data dan lukis carta menggunakan Visualisasi Google API.

Contoh:

<script type="text/javascript">
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
        });
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown + ': ' + textStatus);
      }
    });
  }
}});
</script>
Salin selepas log masuk

Nota:

  • Elakkan menggunakan async: false dalam permintaan AJAX, kerana ia boleh menyekat pelaksanaan.
  • Alih Pilihan hAxis dan vAxis hanya sekali dalam objek pilihan carta.
  • Pastikan anda menggunakan pemilih yang betul untuk pengendali acara onchange dalam HTML.

Atas ialah kandungan terperinci Bagaimana untuk Melukis Semula Carta Google Secara Dinamik Menggunakan AJAX dan PHP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan