développement back-endtutoriel phpComment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.jsComment implémenter des graphiques statistiques horizontaux mis à jour dynamiquement en PHP et Vue.js
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
);- 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);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>- 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
}
}]
}
}
});
}
}
});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!
Comment PHP identifie-t-il la session d'un utilisateur?May 01, 2025 am 12:23 AMPhpidentifiesauser'sessionusingssse cookiesand sessionids.1) whenSession_start () est calculé, phpgeneratesauquesseSessionIdStoredInacookIenameDPhpSesssIdonUser'sbrowser.2) thisIdallowsphptoreTrrieSeSessionDatafromTeserver.
Quelles sont les meilleures pratiques pour sécuriser les séances PHP?May 01, 2025 am 12:22 AMLa sécurité des sessions PHP peut être obtenue grâce aux mesures suivantes: 1. Utilisez Session_RegeReate_ID () pour régénérer l'ID de session lorsque l'utilisateur se connecte ou est une opération importante. 2. Cryptez l'ID de session de transmission via le protocole HTTPS. 3. Utilisez session_save_path () pour spécifier le répertoire sécurisé pour stocker les données de session et définir correctement les autorisations.
Où les fichiers de session PHP sont-ils stockés par défaut?May 01, 2025 am 12:15 AMPhpSessionFilesArestorentheDirectorySpecifiedSession.save_path, généralement / tmponunix-likesystemsorc: \ windows \ temponwindows.tocustomzethis: 1) usession_save_path () tosetacustomDirectory, astumeit'swrit
Comment récupérer les données d'une session PHP?May 01, 2025 am 12:11 AMToretrrievedatafromaphpSession, startTheSessionwithSession_start () et accessvariablesInthe $ _sessionArray.forexample: 1) startTheSession: session_start (). 2) récupéré: $ username = $ _ session ['userSeger']; echo "bienvenue,". $ Username;..
Comment pouvez-vous utiliser des sessions pour mettre en œuvre un panier?May 01, 2025 am 12:10 AMLes étapes pour construire un système de panier d'achat efficace à l'aide de sessions comprennent: 1) Comprendre la définition et la fonction de la session. La session est un mécanisme de stockage côté serveur utilisé pour maintenir l'état de l'utilisateur entre les demandes; 2) Implémenter la gestion de session de base, comme l'ajout de produits au panier; 3) développer une utilisation avancée, soutenant la gestion de la quantité de produits et la suppression; 4) Optimiser les performances et la sécurité, en persistant les données de session et en utilisant des identifiants de session sécurisés.
Comment créez-vous et utilisez-vous une interface dans PHP?Apr 30, 2025 pm 03:40 PML'article explique comment créer, mettre en œuvre et utiliser des interfaces dans PHP, en se concentrant sur leurs avantages pour l'organisation du code et la maintenabilité.
Quelle est la différence entre crypte () et mot de passe_hash ()?Apr 30, 2025 pm 03:39 PML'article traite des différences entre crypt () et mot de passe_hash () dans PHP pour le hachage de mot de passe, en se concentrant sur leur implémentation, leur sécurité et leur aptitude aux applications Web modernes.
Comment pouvez-vous prévenir les scripts inter-sites (XSS) en PHP?Apr 30, 2025 pm 03:38 PML'article discute de la prévention des scripts inter-sites (XSS) dans PHP par validation d'entrée, en codage de sortie et en utilisant des outils comme OWASP ESAPI et Purificateur HTML.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
MantisBT
Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
Version Mac de WebStorm
Outils de développement JavaScript utiles
VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
