Rumah >pembangunan bahagian belakang >tutorial php >Cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js
Cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js
- WBOYasal
- 2023-08-26 10:00:321426semak imbas
Cara untuk melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js
Kata Pengantar:
Carta statistik ialah salah satu komponen penting visualisasi data Dalam pembangunan web, PHP digunakan sebagai bahasa akhir untuk pemprosesan Penyimpanan dan pengiraan data, manakala Vue.js berfungsi sebagai rangka kerja bahagian hadapan untuk mempersembahkan data dan interaksi halaman. Artikel ini akan memperkenalkan cara menggabungkan PHP dan Vue.js untuk melaksanakan carta statistik mendatar yang dikemas kini secara dinamik.
1. Persediaan
Sebelum kita mula, kita perlu memasang dan mengkonfigurasi persekitaran berikut:
- Persekitaran pelayan: Bina pelayan yang boleh menjalankan kod PHP, seperti Apache, Nginx, dll.
- Pangkalan data: Gunakan MySQL atau pangkalan data hubungan lain.
2. .
-
Antara muka belakang Dalam PHP, kami boleh menyediakannya ke bahagian hadapan dengan menulis antara muka bahagian belakang. Cipta fail bernama "api.php" dan tulis kod berikut:
CREATE TABLE statistics (
id INT AUTO_INCREMENT PRIMARY KEY,
value INT
);- Kod di atas bersambung ke pangkalan data melalui PDO, menanyakan data statistik, dan kemudian mengembalikan hasil pertanyaan ke hujung hadapan dalam format JSON.
3. Pembangunan bahagian hadapan
<?php
// 设置响应头
header('Content-Type: application/json');
// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8', 'your_username', 'your_password');
// 查询数据
$stmt = $db->query('SELECT * FROM statistics');
$statistics = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回数据
echo json_encode($statistics);Menggunakan Vue.js di bahagian hadapan untuk memaparkan halaman dan memproses data, kami perlu mencipta fail HTML dan memperkenalkan pautan CDN Vue.js. Kod khusus adalah seperti berikut:
-
Kod JavaScript Buat fail bernama "app.js" dalam direktori yang sama, dan tulis kod berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态更新的水平统计图表</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<canvas id="chart"></canvas>
</div>
<script src="app.js"></script>
</body>
</html>- Kod di atas menggunakan Vue.js untuk mencipta Vue contoh, dan Kaedah getChartData dipanggil dalam fungsi cangkuk yang dipasang, dan permintaan GET dihantar melalui pengambilan untuk mendapatkan data yang dikembalikan oleh antara muka bahagian belakang Kemudian data diperuntukkan kepada chartData, dan kaedah renderChart dipanggil untuk membuat statistik carta.
4 Ujian dijalankan
new Vue({
el: '#app',
data: {
chartData: []
},
mounted() {
this.getChartData();
},
methods: {
getChartData() {
fetch('api.php')
.then(response => response.json())
.then(data => {
this.chartData = data.map(item => item.value);
this.renderChart();
})
.catch(error => console.error(error));
},
renderChart() {
var ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: '销售统计',
data: this.chartData,
backgroundColor: 'rgba(0,123,255,0.5)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
}
});Artikel ini memperkenalkan cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js. Dapatkan data statistik daripada pangkalan data melalui antara muka bahagian belakang dan gunakan Vue.js untuk membentangkan data pada bahagian hadapan dan melaksanakan kemas kini dinamik carta. Kaedah pelaksanaan ini boleh digunakan pada banyak senario visualisasi data sebenar untuk meningkatkan pengalaman pengguna dan kesan paparan data.
Atas ialah kandungan terperinci Cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!