Maison > Article > développement back-end > Guide pratique PHP et Vue.js : Comment appliquer les fonctions de graphiques statistiques dans les projets
Guide pratique PHP et Vue.js : Comment appliquer les fonctions de graphiques statistiques dans les projets
- 王林original
- 2023-08-18 15:09:291033parcourir
Guide pratique PHP et Vue.js : Comment appliquer des fonctions de graphiques statistiques dans les projets
Vue d'ensemble
Dans les applications Web modernes, les graphiques et les statistiques sont très importants. Ils nous aident à visualiser les données pour mieux les comprendre et les analyser. Dans cet article, nous présenterons comment appliquer la fonctionnalité de graphique statistique dans votre projet à l'aide de PHP et Vue.js.
Prérequis
Avant de commencer, assurez-vous d'être déjà familier avec PHP et Vue.js. En attendant, ce tutoriel utilisera les technologies et outils suivants :
- PHP 7+
- Vue.js 2+
- Chart.js
Étape 1 : Créer une structure de projet
Tout d'abord, créez un nouveau répertoire de projet et placez-le. in Les fichiers et dossiers suivants sont créés en interne :
-
index.html: fichier HTML utilisé pour afficher les graphiquesindex.html：用于展示图表的HTML文件 scripts/
scripts/ : utilisé pour stocker Vue.js et Chart .js JavaScript
Étape 2 : Installez Chart.js
$ npm install chart.js
Étape 3 : Créez le fichier index.htmlDans l'index. .html, nous allons créer un composant simple à l'aide de Vue.js et rendre le graphique à l'aide de Chart.js. De plus, les fichiers JavaScript de Vue.js et Chart.js doivent être introduits.
<!DOCTYPE html>
<html>
<head>
<title>统计图表功能</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="scripts/chart.js"></script>
</head>
<body>
<div id="app">
<canvas id="chart"></canvas>
</div>
<script src="app.js"></script>
</body>
</html>Étape 4 : Créer un fichier app.js Créez un fichier JavaScript appelé app.js dans le dossier des scripts. Dans ce fichier, nous allons créer une instance Vue et utiliser Chart.js dans son hook de cycle de vie monté pour restituer le graphique.
new Vue({
el: '#app',
mounted: function() {
var ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: '数据集',
data: [10, 20, 30, 40, 50, 60, 70],
backgroundColor: '#FF6384',
borderColor: '#FF6384',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
});Étape 5 : Exécutez le projet Ouvrez un terminal dans le répertoire racine et exécutez la commande suivante pour démarrer un serveur local :
$ php -S localhost:8000Ensuite, visitez http://localhost:8000/index.html dans votre navigateur et vous voir Accéder à une page contenant des graphiques statistiques.
Conclusion
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!