Français
Français
Avec la croissance des besoins en analyse et visualisation des données, les graphiques statistiques sont de plus en plus utilisés dans les applications Web. La combinaison de PHP et Vue.js peut réaliser un affichage en temps réel des données, permettant aux graphiques de toujours refléter le dernier état des données. Cet article présentera en détail l’ensemble du processus de mise en œuvre.
Avant de commencer, assurez-vous d'avoir installé les environnements de développement PHP et Vue.js et préparez un serveur backend PHP qui fournit une interface de données et une application Vue.js frontale.
Dans le backend PHP, nous devons créer une interface de données qui fournit les données requises pour le graphique. Vous pouvez utiliser PDO ou mysqli pour accéder à la base de données et renvoyer les résultats de la requête au front-end au format JSON.
<?php
// Se connecter à la base de données
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
// Données de requête
$stmt = $pdo-> préparer("SELECT * FROM statistiques");
$stmt->exécuter();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Renvoie l'en-tête de données JSON ('Content-Type: application/json');
echo json_encode($données);
?>Le code ci-dessus se connecte à la base de données MySQL nommée test, interroge toutes les données de la table de statistiques, puis les renvoie au front-end au format JSON.
En front-end, nous utilisons Vue.js pour afficher des graphiques statistiques et mettre à jour les données en temps réel. Tout d’abord, introduisez les bibliothèques Vue.js et ECharts dans HTML.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
Ensuite, définissez les données et les méthodes dans l'instance Vue.
<div id="app">
<div ref="chart" style="width: 600px; height: 400px;"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
chart: null,
data: []
},
mounted() {
this.chart = echarts.init(this.$refs.chart);
this.getData();
},
methods: {
getData() {
fetch('api.php') // appelPHPinterface
.then(response => response.json())
.then(data => {
this.data = data;
this.updateChart();
});
},
updateChart() {
// Mettre à jour les données du graphique et effectuer un nouveau rendu
const option = {
// Paramètres de configuration du graphique
series: [{
data: this.data
}]
};
this.chart.setOption(option);
}
}
});
</script>Dans le code ci-dessus, l'instance Vue contient un élément div utilisé pour afficher le graphique. Initialisez l'instance echarts dans le hook de cycle de vie monté et appelez la méthode getData pour obtenir les données. La méthode getData appelle l'interface PHP pour obtenir des données JSON via la récupération et appelle la méthode updateChart pour mettre à jour le graphique.
Pour que le graphique reflète les modifications des données en temps réel, vous pouvez utiliser une minuterie pour appeler périodiquement la méthode getData.
setInterval(() => {
this.getData();
}, 5000); // Mettre à jour les données toutes les 5 secondesCe code exécutera la méthode getData toutes les 5 secondes pour mettre à jour les données du graphique et obtenir des effets d'affichage en temps réel.
Cet article explique comment combiner PHP et Vue.js pour implémenter des mises à jour de données pour les graphiques statistiques. En fournissant une interface de données en PHP et en l'affichant à l'aide de Vue.js et ECharts sur le front-end, les développeurs peuvent facilement implémenter des graphiques de visualisation de données dynamiques et mis à jour en temps réel. Cette méthode est flexible et facile à étendre, et convient à différents types de scénarios de statistiques de données.
