Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk menggabungkan antara muka ECharts dan php untuk merealisasikan kemas kini dinamik carta statistik

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

PHPzasal: 2023-12-17 15:47:13866semak imbas

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> <skrip src="echarts.min.js"> <skrip src="jquery.min.js"> < ;body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // Mulakan carta var carta = echarts.init ( document.getElementById('cart'));</script> // AJAX request data $.getJSON('api.php', function(data) {<pre class='brush:php;toolbar:false;'> // 动态更新图表 updateChart(data);</pre>}); // Kemas kini carta dalam masa nyata setInterval ( function() {<pre class='brush:php;toolbar:false;'> $.getJSON('api.php', function(data) { // 动态更新图表 updateChart(data); });</pre>}, 5000); //Kemas kini setiap 5 saat //Fungsi carta kemas kini dinamik fungsi kemas kiniChart(data) {<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>} </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!

php JavaScript sql mysql nginx json jquery ajax echarts html echo Array NULL if while select die int 接口 var JS function table 数据库 apache

Kenyataan：

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 sebelumnya：Panduan Pembangunan Coroutine Asynchronous: Membina Sistem Pengesyoran Berprestasi TinggiArtikel seterusnya：Panduan Pembangunan Coroutine Asynchronous: Membina Sistem Pengesyoran Berprestasi Tinggi

Artikel berkaitan

Lihat lagi