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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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