Fermer

avril 15, 2019

Comment utiliser un composant d'interface graphique Vue Graphique dans votre application Web


Apprenez à utiliser facilement des graphiques à courbes dans vos applications pour tracer des données qui changent avec le temps. Les graphiques linéaires peuvent afficher des modèles tels que les tendances haussières et les tendances baissières.

Dans cet article, vous apprendrez à utiliser le composant LineChart de Kendo UI pour Vue . Les graphiques linéaires sont utilisés pour tracer des données qui changent avec le temps. Nous utiliserons un graphique en courbes pour représenter graphiquement les données de crypto-monnaie. Nous avons choisi les crypto-monnaies, car la représentation graphique des données financières est un bon exemple d'utilisation d'un graphique à courbes. Les graphiques linéaires vous permettent de détecter des tendances dans les données, telles que les tendances à la hausse et à la baisse. Le prix des crypto-monnaies augmente et diminue régulièrement, il est donc utile de tracer les données sur un graphique à courbes afin de déterminer l'orientation de la tendance.

Bien sûr, un graphique à courbes peut également être utilisé pour d'autres types de données telles que la météo et la santé. . Vous pouvez comparer la température dans le temps ou la pression artérielle d’une personne.

Nous allons maintenant montrer comment créer un graphique en courbes montrant le prix hebdomadaire du bitcoin à l’aide d’une source de données locale. Nous allons ensuite créer un graphique en courbes indiquant le volume quotidien de la devise Dash à l'aide d'une source de données distante.

Pour commencer

Pour initialiser notre projet, nous utilisons le modèle Vue webpack-simple . Dans notre projet, nous installons les dépendances qui sont Kendo UI, le thème par défaut, l'encapsuleur Charts et l'encapsuleur DataSource. Les commandes suivantes installent les packages:

 npm   install  --save @ progress / kendo-ui
 npm   installez  --save @ progress / kendo-theme-default
 npm   installez  --save @ progress / kendo-charts-vue-wrapper
 npm   installer  --save @ progress / kendo-datasource-vue-wrapper

Dans le fichier main.js nous importons Kendo UI, le thème, le graphique et la source de données. Nous enregistrons la source graphique et la source de données globalement à l'aide des éléments ChartInstaller et DataSourceInstaller et nous les ajoutons à la liste des composants.

 import  Vue  de   de vue '
 import  App  de  ' ./ App.vue '
 import  ' @ progress / kendo-ui '
 import  ' @ progrès / kendo -theme-default / dist / all.css '
 import   { Carte  Outil d'installation de cartes }   de  ' @ progress / kendo-charts- vue-wrapper '
 import   { DataSource  DataSourceInstaller }   de  ' @ progress / kendo-datasource-vue-wrapper '

Vue .  use  ( ChartInstaller ) 
Vue .  utilisez  ( DataSourceInstaller ) 

 nouveau   Vue  ( {
  el :   '# app' 
  composants :   {
  Carte 
  La source de données
  } 
  render :  h  =>   h  ( App ) 
} )

Liaison aux données locales

Les données nous utiliserons provient du site CoinMarketCap . Le site contient des informations sur plus de 2 000 crypto-devises, y compris la capitalisation boursière, le prix, l'offre et le volume. Il a été choisi car ils conservent des instantanés historiques de toutes les crypto-monnaies chaque semaine. Cela nous donne les informations dont nous avons besoin pour construire un graphique afin de pouvoir comparer l'évolution du prix de Bitcoin au fil du temps. Nous examinerons 10 points de données du 14 octobre 2018 au 16 décembre 2018.

Nous ajouterons un composant graphique au modèle dans le fichier App.vue . Dans le composant, nous allons définir le titre du graphique sur «Prix Bitcoin», positionner la légende au bas du graphique et ajouter des info-bulles lors du survol des marqueurs. Les séries, les catégories et l’axe des valeurs seront définis dans nos données. Le modèle mis à jour est le suivant:

 < modèle > 
  < div   id  =  " app "  > 
  < carte de kendo 
 : titre-texte  =  " ' Prix du bitcoin ' "  [
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link