Guide pratique PHP et Vue.js : Comment appliquer les fonctions de graphiques statistiques dans les projets-tutoriel php-php.cn

Guide pratique PHP et Vue.js : Comment appliquer les fonctions de graphiques statistiques dans les projets

王林

Libérer： 2023-08-18 15:10:01

original

1053 Les gens l'ont consulté

Guide pratique PHP et Vue.js : Comment appliquer les fonctions de graphiques statistiques dans les projets

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 graphiques index.html：用于展示图表的HTML文件
scripts/

scripts/

Étape 2 : Installez Chart.js

Ouvrez un terminal dans le répertoire racine du projet et exécutez la commande suivante pour installer Chart.js :

$ npm install chart.js

Copier après la connexion

Étape 3 : Créez le fichier index.html

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

Copier après la connexion

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

Copier après la connexion

É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:8000

Copier après la connexion

Ensuite, visitez http://localhost:8000/index.html dans votre navigateur et vous voir Accéder à une page contenant des graphiques statistiques.

Conclusion

Cet article explique comment utiliser PHP et Vue.js pour appliquer des fonctions de graphique statistique dans les projets. Nous utilisons la bibliothèque Chart.js pour créer et restituer des graphiques, et la combinons avec le framework Vue.js pour organiser le code et gérer les données. J'espère que ce guide vous sera utile pour appliquer la fonction de graphique statistique dans des projets réels. 🎜

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!