Comment construire des graphiques de statistiques réactives avec PHP et VUE.js | Tutoriel de visualisation des données

Introduction

Les graphiques statistiques sont un composant essentiel de l'analyse et de la visualisation des données. Vue.js est actuellement l'un des cadres JavaScript les plus populaires, et PHP, en tant que langage de programmation côté serveur commun, peut facilement créer des graphiques statistiques réactifs et traiter efficacement de grandes quantités de données.

Préparation

Installer vue.js

Avant de créer un tableau statistique, vous devez d'abord installer Vue.js. Vous pouvez installer Vue.js via NPM.

 npm install vue

Dépendances d'installation et de développement

En plus de Vue.js, vous devez également installer certaines dépendances de développement, telles que WebPack, Vue-chargedeur et Babel.

 npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler babel-loader babel-core babel-preset-env --save-dev

Créer le composant Vue.js

Dans vue.js, tous les composants sont des instances VUE indépendantes. Vous pouvez rapidement créer des structures de projet et créer des composants à l'aide de l'outil VUE CLI.

 npm install -g vue-cli
vue create project-name
cd project-name
npm run serve

Une fois le composant créé, vous pouvez définir des données et des méthodes dans les instances VUE et utiliser ces données et méthodes dans des modèles pour générer des graphiques statistiques.

Créer des graphiques statistiques à l'aide de chart.js

Installer chart.js

Chart.js est une bibliothèque de graphiques open source basée sur le toile HTML5. Chart.js peut être facilement installé via NPM.

 npm install chart.js --save

Utilisation de chart.js dans la composante Vue

Lorsque vous utilisez Chart.js dans les composants Vue, vous devez d'abord introduire le fichier JS de chart.js et configurer les données et les options.

 <template>
  <div>
    <canvas id="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';
export default {
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: [65, 59, 80, 81, 56, 55, 40]
          }
        ]
      }
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = document.getElementById('chart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: this.chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }
  }
};
</script>

Résumer

Cet article présente comment combiner PHP avec Vue.js pour construire des cartes statistiques réactives. En introduisant la bibliothèque de graphiques chart.js, vous pouvez facilement implémenter plusieurs graphiques de visualisation de données pour afficher les données plus intuitivement. En utilisant la combinaison de ces technologies, l'efficacité et la commodité de l'analyse et de la visualisation des données peuvent être considérablement améliorées.