Fermer

juin 28, 2019

Comment utiliser un composant d'interface utilisateur Vue Sparkline dans votre application Web


Un graphique sparkline est un petit graphique sans axe, titre ou légende. Il peut être utilisé en ligne pour donner rapidement une vue d'ensemble des données tout en occupant un minimum d'espace. Voyons comment nous pouvons l'ajouter à nos applications.

Dans le post précédent, nous avions appris à créer un diagramme en chandeliers en utilisant de Kendo UI pour Vue . Dans cet article, nous allons créer un graphique sparkline.

Les graphiques sparkline sont de petits graphiques dépourvus d'axe, de titre ou de légende. Avec Kendo UI, vous pouvez créer un graphique sparkline qui est une ligne, une barre, une colonne, une zone, un camembert ou un graphique à puce. Ces graphiques peuvent être utilisés comme éléments en ligne dans le contenu pour donner une vue d'ensemble des données tout en occupant un minimum d'espace. Par exemple, les graphiques sparkline peuvent apparaître dans d'autres composants, tels qu'une grille, dans un paragraphe ou seuls. À l’avenir, nous allons créer deux graphiques sparklines montrant les données sur les stocks.

Pour commencer

Nous allons d’abord initialiser notre projet à l’aide du modèle Vue webpack-simple . Nous allons installer le package Kendo UI et un thème. Nous devons installer le package de graphiques pour utiliser le composant Sparklines . Nous allons installer le paquet DataSource car nous allons utiliser une API pour récupérer nos données. Les commandes suivantes installent nos paquets:

 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 tous les packages. Les graphiques et DataSource sont enregistrés dans le monde entier et ajoutés à la liste des composants. Ce qui suit est le fichier mis à jour.

 import  Vue  de   'vue' 
 import  App  de   './ App.vue' 
 import   '@ progress / kendo-ui' 
 import   '@ progress / kendo-theme-default / dist / all.css' 
 import   { Graphique  ,  ChartInstaller }   de   '@ progress / kendo-charts-vue-wrapper' 
 import   { de la source de données  de la source de données 
. ]}   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 ) 
} )

Ajouter les sparklines

Les données que nous avons utilisera vient de IEX . Nous allons récupérer un mois de données sur les stocks pour Apple. Nous allons créer un graphique sparkline pour un histogramme et un graphique en courbes. Nous utiliserons un graphique à colonnes pour représenter le volume et un graphique à courbes pour représenter le prix de clôture. Le composant DataSource se verra attribuer un nom pour les composants Sparkline à référencer, une URL qui constitue notre point de terminaison d'API et un type de données qui sera JSON.

Nous allons ensuite créer deux composants Sparkline qui incluent une référence à la source de données et une série. Dans le fichier App.vue les composants DataSource et Sparkline sont ajoutés au modèle. Enfin, les séries pour les graphiques sparkline sont définies dans les données. Ils ont reçu un type et un champ.

Sparkline 

 < template > 
   < div   id  =  " ] " > 
     < kendo-datasource 
       ref  = "  source de données  " 
      : transport-read- url  =  " ' https://api.iextrading.com/1.0/stock/aapl/chart/1m ' "  
      : transport-read-data-type  =  " ' json ' "  > 
     </  kendo-dataource [19659029]> 
     < p > 
       Volume
       < kendo-sparkline 
        : data-source-ref  =  " ' source de données ' " 
       : série  =  " sérieA "  > 
        </  de kendo-sparkline > 
     </  p > 
     < p > 
       Fermer
       < kendo-sparkline 
        : data-source-ref  =  " ' source de données ' " 
       : série  =  " série B "  > 
        </  de type kendo-sparkline > 
     </  p > 
   </  div > 
 </  modèle > 

 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      série A :   [ {
        type :   'colonne' 
        champ :   'volume' 
      } ] 
      série B :   [ {
        type :   'ligne' 
        champ :   'close' 
      } ] 
    } 
  } 
} 
  </  script > 

 < style > 
 #app   {
   de famille de polices :   'helvetica' ; 
   margin-top :   60  px ; 
} 
  </  style >

Ajout d'un ButtonGroup

Nous allons maintenant ajouter un groupe de boutons à notre page pour que nous puissions voir le mois, les trois mois et données semestrielles pour notre stock. Lorsque vous sélectionnez un bouton, les graphiques sparkline mettront à jour les deux graphiques pour afficher les nouvelles données. Nous allons d’abord installer le paquet de boutons pour pouvoir utiliser le groupe de boutons.

 npm   install  --save @ progress / kendo-buttons-vue-wrapper

Ensuite, nous importons le package dans le fichier main.js enregistrons le composant globalement et l'ajoutons à la liste des composants. Ceci est le fichier mis à jour:

 import  Vue  de   'vue' 
  import  App  de   './ App.vue' 
  import   '@ progress / kendo-ui' 
  import   '@ progress / kendo-theme-default / dist / all.css' 
  import   { Graphique  ChartInstaller }   de   '@ progress / kendo-charts-vue-wrapper' 
  import   { source de données  de sources de données 
 . }   de   '@ progress / kendo-datasource-vue-wrapper' 
  import   { ButtonGroup  ButtonGroupButton 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link