Création de beaux graphiques en utilisant des emballages Vue.js pour Chart.js

Créez de beaux graphiques avec Vue.js et Chart.js

Les graphiques

sont un élément important des sites Web et applications modernes qui aident à présenter des informations difficiles à exprimer dans le texte et à rendre autrement difficile à comprendre les données présentes de manière facile à lire et à comprendre. Cet article montrera comment créer différents types de graphiques à l'aide de chart.js et vue.js. Chart.js est une bibliothèque de graphiques JavaScript simple et flexible qui permet aux développeurs et aux concepteurs de dessiner différents types de graphiques à l'aide d'éléments de toile HTML5. Vue.js est un cadre JavaScript progressif que nous utiliserons avec chart.js pour démontrer des exemples de représentation de graphe. Nous utiliserons la Vue CLI pour construire le projet Vue.js.

Points clés:

• vue.js Wrappers comme Vue-chartjs, Vue-charts et Vue-chartkick simplifier l'intégration de chart.js avec des applications Vue, dont chacune fournit des fonctionnalités uniques.
• VUE CLI est utilisé pour créer des projets Vue.js, simplifiant le processus de réglage de la création de graphiques.
• Vue-chartjs permet la création de composants de graphique réutilisables, améliorant la maintenabilité et l'évolutivité des applications VUE.
• Vue-chart fournit un moyen de créer des graphiques directement à l'aide de données à partir des instances VUE sans avoir besoin de composants séparés.
• Vue-chartkick fournit la syntaxe de création de graphiques la plus simple et comprend des capacités de téléchargement de données intégrées, mais manque de réactivité.
• La fonction réactive de Vue-chartJS permet aux graphiques de mettre à jour les données en temps réel, ce qui est crucial pour la visualisation dynamique des données.
Des exemples détaillés et des extraits de code dans la documentation aident les développeurs à mettre en œuvre et à personnaliser efficacement les graphiques dans les projets Vue.js.

Sélection de la bibliothèque graphique:

Vue Wrappers pour diverses bibliothèques de graphiques sont collectées dans le référentiel impressionnant de vue sur github. Puisque nous nous concentrons sur Chart.js, nous nous concentrerons sur les emballages suivants:

vue-chart
vue-chartjs
vue-chartkick

Nous utiliserons ces emballages pour montrer comment créer différents types de graphiques et présenter les fonctionnalités uniques qu'ils offrent chacune. Le code source de ce tutoriel est disponible sur GitHub.

Créer des projets en utilisant Vue CLI:

Tout d'abord, installez Vue CLI avec la commande suivante:

npm install -g @vue/cli

Ensuite, utilisez la commande suivante pour construire le projet:

vue create chart-js-demo

Suivez l'assistant pour sélectionner les fonctions suivantes: babel, routeur, eslint avec prévention des erreurs uniquement, peluche sur la sauvegarde.

Suivant, installez chart.js et divers emballages:

cd chart-js-demo
npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkick

Exécutez l'application:

npm run serve

Paramètres de base:

Créez le fichier suivant:

touch src/views/{VueChartJS.vue,VueChartKick.vue,VueCharts.vue}
touch src/components/{LineChart.vue,BarChart.vue,BubbleChart.vue,Reactive.vue}

supprimer

, src/views/About.vue et src/components/HelloWorld.vue dossiers. src/assets

Ajouter un itinéraire:

Modifier

Fichier et ajouter l'itinéraire: src/router.js

// ... (导入语句) ...

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/chartjs', name: 'VueChartJS', component: VueChartJS },
    { path: '/chartkick', name: 'VueChartKick', component: VueChartKick },
    { path: '/charts', name: 'VueCharts', component: VueCharts }
  ]
})

Ajouter la navigation:

Modifier

Fichiers, ajouter la navigation et les styles: src/App.vue

<template>
  <!-- ... (导航代码) ... -->
</template>

<style>
  /* ... (样式代码) ... */
</style>

Composant domestique:

Modifier src/views/Home.vue Fichier:

npm install -g @vue/cli

Ajouter Bulma:

Ajouter le framework Bulma CSS dans la balise public/index.html du fichier <head>:

vue create chart-js-demo

(Le contenu suivant continuera d'introduire comment utiliser Vue-chartjs, Vue-chart et Vue-chartkick pour créer différents types de graphiques. En raison de limitations d'espace, du code spécifique et des étapes détaillées sont omises ici. Veuillez vous référer au texte d'origine pour le code complet et les étapes.

Comparaison de la bibliothèque graphique:

vue-chartjs:
• puissant, flexible et prend en charge des fonctionnalités réactives, mais une configuration relativement complexe.
Vue-chart:
• Facile à configurer, pas besoin de créer des composants séparés, prend en charge les fonctionnalités réactives.
vue-chartkick:
• le plus facile à utiliser, prend en charge les téléchargements du graphique, mais manque de fonctionnalités réactives intégrées.

Conclusion:

Cet article présente diverses emballages Vue pour chart.js et montre comment les utiliser pour créer des graphiques. Le code source est disponible sur GitHub.

(Le contenu suivant est la partie FAQ d'origine, et en raison des limitations de l'espace, il est omis ici. Veuillez vous référer au texte d'origine pour le contenu FAQ complet.)

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!