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

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

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

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