Comment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.js-tutoriel php-php.cn

Comment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.js

WBOY

Libérer： 2023-08-26 10:02:02

original

1447 Les gens l'ont consulté

Comment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.js

Avant-propos :
Les graphiques statistiques sont l'un des composants importants de la visualisation de données dans le développement Web, PHP est utilisé comme langage back-end pour le traitement. Stockage et calcul des données, tandis que Vue.js sert de cadre frontal pour la présentation des données et l'interaction des pages. Cet article explique comment combiner PHP et Vue.js pour implémenter des graphiques statistiques horizontaux mis à jour dynamiquement.

1. Préparation
Avant de commencer, nous devons installer et configurer l'environnement suivant :

Environnement du serveur : Construisez un serveur capable d'exécuter du code PHP, tel qu'Apache, Nginx, etc.
Base de données : utilisez MySQL ou une autre base de données relationnelle.

2. Développement back-end

Créer une table de base de données
Tout d'abord, nous devons créer une table de base de données pour stocker les données statistiques. Par exemple, nous créons une table nommée « statistiques », qui contient deux champs : identifiant et valeur. .

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

Copier après la connexion

Interface backend
En PHP, nous pouvons le fournir au front-end en écrivant une interface backend. Créez un fichier nommé "api.php" et écrivez le code suivant :

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

Copier après la connexion

Le code ci-dessus se connecte à la base de données via PDO, interroge les données statistiques, puis renvoie les résultats de la requête au front-end au format JSON.

3. Développement front-end

Structure de la page
En utilisant Vue.js sur le front-end pour rendre les pages et traiter les données, nous devons créer un fichier HTML et introduire le lien CDN de Vue.js. Le code spécifique est le suivant :

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

Copier après la connexion

Code JavaScript
Créez un fichier nommé "app.js" dans le même répertoire, et écrivez le code suivant :

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

Copier après la connexion

Le code ci-dessus utilise Vue.js pour créer une Vue. instance, et la méthode getChartData est appelée dans la fonction hook montée, et une requête GET est envoyée via fetch pour obtenir les données renvoyées par l'interface backend. Ensuite, les données sont affectées à chartData et la méthode renderChart est appelée pour restituer les statistiques. graphique.

4. Test d'exécution
Ouvrez le fichier HTML dans le navigateur et vous pourrez voir le graphique statistique horizontal mis à jour dynamiquement. Si de nouvelles données statistiques doivent être ajoutées, les données peuvent être ajoutées en appelant l'interface backend, puis le frontend obtiendra automatiquement les dernières données et mettra à jour le graphique.

Conclusion :
Cet article présente comment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.js. Obtenez des données statistiques de la base de données via l'interface back-end et utilisez Vue.js pour présenter les données sur le front-end et implémenter des mises à jour dynamiques des graphiques. Cette méthode de mise en œuvre peut être appliquée à de nombreux scénarios réels de visualisation de données pour améliorer l'expérience utilisateur et les effets d'affichage des données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!