Maison > interface Web > Voir.js > Comment créer rapidement un système de graphiques statistiques sous le framework Vue

Comment créer rapidement un système de graphiques statistiques sous le framework Vue

WBOY
Libérer: 2023-08-21 17:48:24
original
1452 Les gens l'ont consulté

Comment créer rapidement un système de graphiques statistiques sous le framework Vue

Comment créer rapidement un système de graphiques statistiques sous le framework Vue

Dans les applications Web modernes, les graphiques statistiques sont un composant essentiel. En tant que framework frontal populaire, Vue.js fournit de nombreux outils et composants pratiques qui peuvent nous aider à créer rapidement un système de graphiques statistiques. Cet article expliquera comment utiliser le framework Vue et certains plug-ins pour créer un système de graphiques statistiques simple.

Tout d'abord, nous devons préparer un environnement de développement Vue.js, y compris l'installation de l'échafaudage Vue et de certains plug-ins associés. Exécutez la commande suivante dans la ligne de commande :

npm install -g @vue/cli
Copier après la connexion

Une fois l'installation terminée, nous pouvons utiliser la CLI Vue pour initialiser un nouveau projet Vue. Exécutez la commande suivante dans la ligne de commande :

vue create statistics-chart
Copier après la connexion

Sélectionnez la configuration par défaut en fonction des invites, puis entrez dans le répertoire du projet :

cd statistics-chart
Copier après la connexion

Ensuite, nous devons installer le plug-in pour dessiner des graphiques. Exécutez la commande suivante dans la ligne de commande :

npm install vue-chartjs chart.js
Copier après la connexion

Une fois l'installation terminée, nous pouvons commencer à écrire du code. Tout d'abord, créez un fichier nommé Chart.vue dans le répertoire src/components. Dans ce fichier, nous utiliserons Vue Chart.js pour dessiner le graphique.

Le code de Chart.vue est le suivant :

<template>
  <div class="chart">
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

<style scoped>
.chart {
  position: relative;
  width: 100%;
  height: 400px;
}
</style>
Copier après la connexion

Dans ce code, nous utilisons la méthode renderChart fournie par Vue pour restituer le graphique. Nous pouvons transmettre les données et les options du graphique aux accessoires du composant Chart pour la configuration.

Ensuite, créez un fichier nommé Statistics.vue dans le répertoire src/views. Dans ce fichier, nous utiliserons le composant Chart pour dessiner des graphiques statistiques. Le code de

Statistics.vue est le suivant :

<template>
  <div class="statistics">
    <chart :data="chartData" :options="chartOptions"></chart>
  </div>
</template>

<script>
import Chart from '@/components/Chart'

export default {
  components: {
    Chart
  },
  data () {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Sales',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
            label: 'Profit',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            data: [28, 48, 40, 19, 86, 27, 90]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

<style scoped>
.statistics {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>
Copier après la connexion

Dans ce code, nous définissons un objet chartData pour stocker les données du graphique, où les étiquettes représentent les données de l'axe X et les ensembles de données représentent plusieurs ensembles de données. Nous définissons également un objet chartOptions pour configurer certaines options du graphique.

Enfin, configurez le routage dans le fichier src/router/index.js afin que le composant Statistiques soit accessible dans le navigateur. Le code est le suivant :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Statistics from '../views/Statistics.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Statistics',
    component: Statistics
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
Copier après la connexion

Jusqu'à présent, nous avons terminé la construction du système de graphiques statistiques. Nous pouvons maintenant exécuter le projet et accéder à la page dans le navigateur.

Exécutez la commande suivante dans la ligne de commande pour exécuter le projet :

npm run serve
Copier après la connexion

Ouvrez le navigateur et entrez http://localhost:8080 pour voir le graphique statistique dessiné.

Dans cet article, nous utilisons le framework Vue et certains plug-ins pour créer rapidement un système de graphiques statistiques simple. Grâce à cet exemple, vous pouvez apprendre à utiliser Vue pour dessiner des graphiques, transmettre des données et configurer des options. Ensuite, vous pouvez étendre et personnaliser davantage le système en fonction de vos besoins, par exemple en ajoutant davantage de types de graphiques et de fonctionnalités interactives. Je vous souhaite du succès dans le développement d'un système de graphiques statistiques sous le framework Vue !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal