Cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Cara melaksanakan carta statistik mendatar yang dikemas kini secara dinamik dalam PHP dan Vue.js

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 am 10:00 AM

phpvuejsKemas kini dinamik

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. .

CREATE TABLE statistics (
    id INT AUTO_INCREMENT PRIMARY KEY,
    value INT
);

Antara muka belakang

<?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);

Kod di atas bersambung ke pangkalan data melalui PDO, menanyakan data statistik, dan kemudian mengembalikan hasil pertanyaan ke hujung hadapan dalam format JSON.

Struktur halaman

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:

<!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 JavaScript

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
                            }
                        }]
                    }
                }
            });
        }
    }
});

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.

Buka fail HTML dalam penyemak imbas dan anda boleh melihat carta statistik mendatar yang dikemas kini secara dinamik. Jika terdapat data statistik baharu yang perlu ditambah, data boleh ditambah dengan memanggil antara muka bahagian belakang, dan kemudian bahagian hadapan akan secara automatik mendapatkan data terkini dan mengemas kini carta.

Kesimpulan:

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!

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 Berkaitan

Bagaimana anda membuat dan menggunakan antara muka dalam PHP?Apr 30, 2025 pm 03:40 PM

Artikel ini menerangkan cara membuat, melaksanakan, dan menggunakan antara muka dalam PHP, memberi tumpuan kepada manfaat mereka untuk organisasi kod dan penyelenggaraan.

Apakah perbezaan antara crypt () dan password_hash ()?Apr 30, 2025 pm 03:39 PM

Artikel ini membincangkan perbezaan antara crypt () dan password_hash () dalam php untuk hashing kata laluan, memberi tumpuan kepada pelaksanaan, keselamatan, dan kesesuaian untuk aplikasi web moden.

Bagaimanakah anda dapat mencegah skrip lintas tapak (XSS) dalam PHP?Apr 30, 2025 pm 03:38 PM

Artikel membincangkan mencegah skrip lintas tapak (XSS) dalam PHP melalui pengesahan input, pengekodan output, dan menggunakan alat seperti OWASP ESAPI dan pembersih HTML.

Apakah autoloading dalam php?Apr 30, 2025 pm 03:37 PM

Autoloading dalam PHP secara automatik memuat fail kelas apabila diperlukan, meningkatkan prestasi dengan mengurangkan penggunaan memori dan meningkatkan organisasi kod. Amalan terbaik termasuk menggunakan PSR-4 dan menganjurkan kod dengan berkesan.

Apakah aliran PHP?Apr 30, 2025 pm 03:36 PM

Aliran PHP menyatukan pengendalian sumber seperti fail, soket rangkaian, dan format mampatan melalui API yang konsisten, abstrak kerumitan dan meningkatkan fleksibiliti dan kecekapan kod.

Berapakah saiz maksimum fail yang boleh dimuat naik menggunakan php?Apr 30, 2025 pm 03:35 PM

Artikel ini membincangkan menguruskan saiz muat naik fail dalam PHP, memberi tumpuan kepada had lalai 2MB dan bagaimana untuk meningkatkannya dengan mengubah suai tetapan php.ini.

Apakah jenis yang boleh dibatalkan dalam PHP?Apr 30, 2025 pm 03:34 PM

Artikel ini membincangkan jenis yang boleh dibatalkan dalam PHP, yang diperkenalkan dalam Php 7.1, yang membolehkan pembolehubah atau parameter menjadi sama ada jenis atau null yang ditentukan. Ia menyoroti faedah seperti kebolehbacaan, keselamatan jenis, dan niat jelas, dan menerangkan cara mengisytiharkan

Apakah perbezaan antara fungsi Unset () dan Unlink ()?Apr 30, 2025 pm 03:33 PM

Artikel ini membincangkan perbezaan antara fungsi Unset () dan Unlink () dalam pengaturcaraan, memberi tumpuan kepada tujuan dan kes penggunaannya. Unset () membuang pembolehubah dari ingatan, sementara Unlink () memadam fail dari sistem fail. Kedua -duanya sangat penting untuk effec

See all articles