Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan kemas kini dinamik carta statistik-tutorial php-php.cn

Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan kemas kini dinamik carta statistik

PHPz

Lepaskan： 2023-12-17 15:48:01

asal

939 orang telah melayarinya

Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan kemas kini dinamik carta statistik

Cara menggabungkan antara muka ECharts dan PHP untuk melaksanakan kemas kini dinamik carta statistik

Pengenalan:
Penggambaran data memainkan peranan penting dalam aplikasi moden. ECharts ialah perpustakaan carta JavaScript yang sangat baik yang boleh membantu kami mencipta pelbagai jenis carta statistik dengan mudah. PHP ialah bahasa skrip yang digunakan secara meluas dalam pembangunan sisi pelayan. Dengan menggabungkan antara muka ECharts dan PHP, kami boleh merealisasikan pengemaskinian dinamik carta statistik, supaya carta boleh dikemas kini secara automatik mengikut perubahan dalam data masa nyata. Artikel ini menerangkan cara melaksanakan fungsi ini dan menyediakan contoh kod khusus.

Langkah 1: Sediakan persekitaran

Pertama, kita perlu menyediakan persekitaran pembangunan, termasuk pelayan Web dan penterjemah PHP. Anda boleh menggunakan mana-mana pelayan web yang sesuai dengan persekitaran anda, seperti Apache atau Nginx. Pada masa yang sama, anda perlu memasang PHP dan pastikan ia berfungsi dengan betul dengan pelayan web anda. Setelah pemasangan selesai, anda boleh menguji bahawa persekitaran anda disediakan dengan betul dengan mencipta skrip PHP mudah.

Langkah 2: Sediakan pangkalan data dan jadual data

Seterusnya, kita perlu menyediakan pangkalan data dan jadual data yang berkaitan untuk menyimpan data yang diperlukan untuk carta statistik. Anda boleh menggunakan MySQL atau mana-mana pangkalan data hubungan lain untuk menyelesaikan tugas ini. Cipta pangkalan data bernama "data_carta" dan buat jadual data bernama "statistik" di dalamnya. Jadual data hendaklah mengandungi medan yang sesuai untuk menyimpan data carta anda. Berikut ialah contoh struktur jadual data MySQL:

CIPTA statistik JADUAL (
id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
kategori VARCHAR(50) NOT NULL,
nilai INT(11) NOT NULL

);

Tiga: Tulis kod antara muka PHP

Kita perlu menulis antara muka PHP untuk mendapatkan data daripada pangkalan data dan mengeluarkannya dalam format JSON. Berikut ialah kod contoh mudah:

// Sambung ke pangkalan data
$conn = mysqli_connect("localhost", "username", "password", "chart_data");

// Semak sama ada sambungan berjaya
jika (!$conn) {
die("Sambungan gagal: " . mysqli_connect_error());
}

// Soal jadual data
$sql = "PILIH kategori, nilai DARI statistik";
$result = mysqli_query( $conn, $sql);

//Tukar hasil pertanyaan kepada format JSON
$data = array();
while($row = mysqli_fetch_assoc($result)) {
$data[] = $ row;
}

// Output data JSON
echo json_encode($data);

// Tutup sambungan pangkalan data
mysqli_close($conn);
?>

Kod di atas akan menanyakan data "statistik jadual daripada pangkalan data dan akan Hasilnya ditukar kepada tatasusunan JSON yang mengandungi semua data. Pastikan untuk menggantikan "nama pengguna" dan "kata laluan" dengan kelayakan pangkalan data anda.

Langkah 4: Tulis kod JavaScript

Seterusnya, kita perlu menggunakan perpustakaan ECharts untuk mencipta halaman web dan menulis beberapa kod JavaScript untuk mengemas kini carta secara dinamik. Berikut ialah kod contoh mudah:

kemas kini / carta statistik secara dinamik tajuk><br> <skrip src="echarts.min.js"><br> <skrip src="jquery.min.js"><br><br> < ;body><br> <div id="chart" style="width: 600px; height: 400px;"></div> <p><script><br> // Mulakan carta <br> var carta = echarts.init ( document.getElementById('cart'));</script></p> <p>// AJAX request data<br> $.getJSON('api.php', function(data) {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> // 动态更新图表 updateChart(data);</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>});</p><p>// Kemas kini carta dalam masa nyata<br> setInterval ( function() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> $.getJSON('api.php', function(data) { // 动态更新图表 updateChart(data); });</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>}, 5000); //Kemas kini setiap 5 saat</p><p>//Fungsi carta kemas kini dinamik<br> fungsi kemas kiniChart(data) {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> chart.setOption({ xAxis: { type: 'category', data: data.map(function(item) { return item.category; }) }, yAxis: { type: 'value' }, series: [{ name: '统计数据', type: 'bar', data: data.map(function(item) { return item.value; }) }] });</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>}<br> <br><br></p></skrip></skrip>

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan kemas kini dinamik carta statistik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!