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
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.
<?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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1677
14
1430
52
1333
25
1278
29
1257
24
PHP dan Python: Paradigma yang berbeza dijelaskan
Apr 18, 2025 am 12:26 AM
PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.
Tujuan PHP: Membina Laman Web Dinamik
Apr 15, 2025 am 12:18 AM
PHP digunakan untuk membina laman web dinamik, dan fungsi terasnya termasuk: 1. Menjana kandungan dinamik dan menghasilkan laman web secara real time dengan menyambung dengan pangkalan data; 2. Proses Interaksi Pengguna dan Penyerahan Bentuk, Sahkan Input dan Menanggapi Operasi; 3. Menguruskan sesi dan pengesahan pengguna untuk memberikan pengalaman yang diperibadikan; 4. Mengoptimumkan prestasi dan ikuti amalan terbaik untuk meningkatkan kecekapan dan keselamatan laman web.
Memilih antara php dan python: panduan
Apr 18, 2025 am 12:24 AM
PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.
PHP dan Python: menyelam mendalam ke dalam sejarah mereka
Apr 18, 2025 am 12:25 AM
PHP berasal pada tahun 1994 dan dibangunkan oleh Rasmuslerdorf. Ia pada asalnya digunakan untuk mengesan pelawat laman web dan secara beransur-ansur berkembang menjadi bahasa skrip sisi pelayan dan digunakan secara meluas dalam pembangunan web. Python telah dibangunkan oleh Guidovan Rossum pada akhir 1980 -an dan pertama kali dikeluarkan pada tahun 1991. Ia menekankan kebolehbacaan dan kesederhanaan kod, dan sesuai untuk pengkomputeran saintifik, analisis data dan bidang lain.
Mengapa menggunakan PHP? Kelebihan dan faedah dijelaskan
Apr 16, 2025 am 12:16 AM
Manfaat utama PHP termasuk kemudahan pembelajaran, sokongan pembangunan web yang kukuh, perpustakaan dan kerangka yang kaya, prestasi tinggi dan skalabilitas, keserasian silang platform, dan keberkesanan kos. 1) mudah dipelajari dan digunakan, sesuai untuk pemula; 2) integrasi yang baik dengan pelayan web dan menyokong pelbagai pangkalan data; 3) mempunyai rangka kerja yang kuat seperti Laravel; 4) Prestasi tinggi dapat dicapai melalui pengoptimuman; 5) menyokong pelbagai sistem operasi; 6) Sumber terbuka untuk mengurangkan kos pembangunan.
Impak PHP: Pembangunan Web dan seterusnya
Apr 18, 2025 am 12:10 AM
Phphassignificantelympactedwebdevelopmentandextendsbeyondit.1) itpowersmajorplatformslikeworderpressandexcelsindatabaseIntions.2) php'SadaptabilityAldoStoScaleforlargeapplicationFrameworksLikelara.3)
PHP vs Python: Gunakan Kes dan Aplikasi
Apr 17, 2025 am 12:23 AM
PHP sesuai untuk pembangunan web dan sistem pengurusan kandungan, dan Python sesuai untuk sains data, pembelajaran mesin dan skrip automasi. 1.PHP berfungsi dengan baik dalam membina laman web dan aplikasi yang cepat dan berskala dan biasanya digunakan dalam CMS seperti WordPress. 2. Python telah melakukan yang luar biasa dalam bidang sains data dan pembelajaran mesin, dengan perpustakaan yang kaya seperti numpy dan tensorflow.
Penggunaan PHP yang berterusan: Sebab -sebab ketahanannya
Apr 19, 2025 am 12:23 AM
Apa yang masih popular adalah kemudahan penggunaan, fleksibiliti dan ekosistem yang kuat. 1) Kemudahan penggunaan dan sintaks mudah menjadikannya pilihan pertama untuk pemula. 2) Bersepadu dengan pembangunan web, interaksi yang sangat baik dengan permintaan HTTP dan pangkalan data. 3) Ekosistem yang besar menyediakan banyak alat dan perpustakaan. 4) Komuniti aktif dan Sumber Sumber Terbuka menyesuaikan mereka dengan keperluan baru dan trend teknologi.
