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

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

WBOY

Lepaskan： 2023-08-26 10:02:02

asal

1446 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!