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

Les graphiques régionaux permettent de visualiser facilement une tendance dans le temps. Apprenez à ajouter facilement un graphique à secteurs à votre application Web.

Dans le dernier article, nous avons découvert le diagramme en secteurs et le graphique en anneau dans de Kendo UI pour Vue . Dans cet article, nous allons apprendre à créer un graphique à secteurs.

Dans un graphique à secteurs, chaque point de données est connecté à une ligne et l'espace en dessous de la ligne est rempli de couleur. Les graphiques en aires sont utiles pour visualiser une tendance globale par opposition à des valeurs individuelles. Par exemple, un graphique en courbes peut indiquer le prix d’une action au fil du temps. Un tel graphique indiquerait clairement si le prix a tendance à augmenter ou à baisser. Un graphique en aires des mêmes données indiquerait dans quelle mesure le prix a augmenté ou baissé.

Nous allons créer un graphique en aires pour montrer l'écart entre les enchères et les demandes pour une crypto-monnaie. Ensuite, nous allons créer un autre graphique traçant l'offre et le ask ensemble et dans différents volets afin que vous puissiez voir l'écart dans une vue différente.

Mise en route

Nous allons d'abord initialiser un projet Vue à l'aide du pack Web . modèle simple . Pour construire notre graphique, vous avez besoin de Kendo UI, d'un thème, du package Charts et du package DataSource . Nous allons installer ces dépendances avec les commandes suivantes:

 npm   install  --save @ progress / kendo-ui
 npm   installer  --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 nos packages, enregistrons les graphiques et dans le monde, puis nous les ajoutons à la liste des composants. ] import Vue de 'vue'
import App de './ App.vue'
import '@ progress / kendo -ui '
import ' @ progress / kendo-theme-default / dist / all.css '
import { Les graphiques de ChartInstaller } 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 )
} )


Nous voulons représenter graphiquement la propagation bid-ask pour la crypto-monnaie Dash. L'écart est la différence entre le prix le plus élevé qu'un acheteur est disposé à payer et le prix le plus bas qu'un vendeur est disposé à accepter. Le prix qu'un acheteur est disposé à payer s'appelle l'offre. Le prix qu'un vendeur est prêt à accepter est la demande. Si l'offre la plus élevée est $8 et la plus basse cote est 10$le spread est de 2 $. Un graphique en aires est utile pour visualiser ce type de données, car nous pourrons voir l'ampleur de la dispersion dans le temps. L'aire sous la courbe sera plus grande lorsque l'écart sera plus grand et diminuera quand il sera plus petit.

Création du graphique en aires

Nous allons d'abord configurer le composant DataSource . Cela nécessite un nom de référence, une URL et un type de données. Les données n'étant pas dans un format utilisable, nous devrons également les analyser.

Les données seront extraites d'un noeud final d'API, puis sauvegardées localement dans un fichier JSON. La source des données est Kraken . L'API renvoie l'enchère, la demande et l'horodatage. Nous allons calculer l'écart en prenant la différence de l'offre et demander. Le noeud final pour les données est le suivant:

 https://api.kraken.com/0/public/Spread?pair=dashusd

Dans le fichier App.vue nous ajoutons le composant DataSource au modèle et une méthode au script pour analyser les données. Ceci est le fichier mis à jour.

 < template > 
   < div   id  =  " app "  [ 19659030]> 
     < kendo-datasource 
       ref  =  " dataSource "  
      : transport-read-url  = 19659030] " ' Spread.json ' "  
      : type de données de transport transport  =  " ' json  ' " 
      : schema-parse  = "  schemaParse  " > 
     </  kendo-datasource > 
   </  div > 
 </  template > 

 < script > 
 exportation [19659023] default   {
  nom :   'app' 
  Méthodes :   {
    schemaParse :   function  ( response )   {
       return  réponse .  résultat . .  DASHUSD . .  carte  ( fonction  ( arr )   {
         retour   {
          horodatage :  arr  [ 0 ] 
          offre :  arr  [ 1 ] 
          demander :  arr  [ 2 ] 
          spread :  arr  [ 2 ]   -  arr  [ 1 ] 
        } 
       des éléments de la série 19659030]) ; 
    } 
  } 
} 
 </  script >  

Ensuite, nous allons créer le composant graphique. Il comportera une référence au composant DataSource une info-bulle, une série, un axe de catégorie, un axe de valeur et un thème. Le type de série sera défini sur zone. La propriété field field de la série utilisera le champ personnalisé que nous avons créé appelé spread. La catégorie FieldField sera l'horodatage. Le code suivant ajoute le composant Chart au modèle et les données du graphique au script.

 < template > 
   < div   id [19659076] =  " app "  > 
     ...
     < kendo-chart 
      : data-source-ref  =  " ' source de données ' "  [19659000]: infobulle  =  " infobulle "  
      : série  =  " série "  [19659804] 

 : [catégorie] axis  =  " categoryAxis "  
      : value-axis  =  " valueAxis "  [19659000]: thème  =  " ' blueopal ' "  > 
     </  de kendo-chart > 
   </  div > 
 </  template >  
 
 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      Info-bulle :   {
        visible :   true 
        format :   'c6' 
      } 
      série :   [ {
        type :   'zone' 
        champ :   'propagation' 
        catégorieField :   'Horodatage' 
        nom :   'Spread' 
      } ] 
      catégorieAxis :   {
        étiquettes :   {
          visible :   false 
        } 
        majorGridLines :   {
          visible :   false 
        } 
      } 
      valueAxis :   {
        étiquettes :   {
          format :   'c2' 
        } 
      } 
    } 
  } 
   ... 
} 
 </  script > 

Création d'un graphique à secteurs avec deux séries

Tout d'abord, nous allons créer un graphique en aires qui se chevauchent pour montrer l'offre et le demander. Ensuite, nous utiliserons le graphique pour afficher chaque série dans des volets distincts. Le code suivant met à jour notre série avec les informations de notre offre et demande.

 série: [{
  type: 'area',
  field: 'bid',
  categoryField: 'timestamp',
  name: 'Bid'
},
{
  type: 'area',
  field: 'ask',
  categoryField: 'timestamp',
  name: 'Ask'
}],

Ensuite, nous allons ajouter les volets. L'attribut panneaux sera ajouté au composant de graphique et les panneaux seront définis dans les données. Un nom sera attribué à chaque volet afin qu'il puisse être associé à un axe. Ensuite, nous allons créer deux axes pour l’axe des valeurs. Chaque axe est associé à un volet en définissant son option de volet. Enfin, la série doit être associée à l’axe en définissant son attribut. Ce qui suit est le fichier App.vue mis à jour.

 < template > 
   < div   id  =  " app  " > 
     < kendo-datasource 
       ref  = "  source de données  " 

  [19659000] transport-read-url  =  " ' Spread.json ' "  
      : transport-read-data-type  = [19659030] " ' json ' "  
      : schema-parse  =  " schemaParse "  " de . ]> 
     </  kendo-datasource > 
     < diagramme en kendo 
      : data-source-ref  =  " ' dataSource  ' " 
      : tooltip  = "  tooltip  " 
      : série  = "  série  " [19659080]: category-axis  =  " categoryAxis "  
      : value-axis  =  " valeurAxis "  
      : theme  =  " ' blueopal ' "  
      : vitres  =  " vitres [19659000] " > 
     </  carte de kendo > 
   </  div > 
 </  modèle  > 

 < script > 
 export   défaut   {
  nom :   'app' 
   données   ()   {
     retour   {
      Info-bulle :   {
        visible :   true 
        format :   'c6' 
      } 
      série :   [ {
        type :   'zone' 
        champ :   'bid' 
        catégorieField :   'Horodatage' 
        nom :   'Bid' 
        axe :   'Bid' 
      } 
       {
        type :   'zone' 
        champ :   'demander' 
        catégorieField :   'Horodatage' 
        nom :   'Ask' 
        axe :   'Ask' 
      } ] 
      catégorieAxis :   {
        étiquettes :   {
          visible :   false 
        } 
        majorGridLines :   {
          visible :   false 
        } 
      } 
       valueAxis :   [
       {
        nom :   'Ask' 
        volet :   'panneau supérieur' 
        étiquettes :   {
          format :   'c2' 
        } 
      } 
       {
        nom :   'Bid' 
        volet :   'volet inférieur' 
        étiquettes :   {
          format :   'c2' 
        } 
      } ] 
       :  [
         { nom :   'face supérieure' } 
         { nom : [19659014] 'bottom-pane' } 
      ] 
    } 
  } 
  Méthodes :   {
    schemaParse :   function  ( response )   {
       return  réponse .  résultat . .  DASHUSD . .  carte  ( fonction  ( arr )   {
         retour   {
          horodatage :  arr  [ 0 ] 
          offre :  arr  [ 1 ] 
          demander :  arr  [ 2 ] 
          spread :  arr  [ 2 ]   -  arr  [ 1 ] 
        } 
       des éléments de la série 19659030]) ; 
    } 
  } 
} 
 </  script > 

 < style > 
 #app   {
   margin-top :   60  px ; 
} 
 </  style >   ]

Pour un examen plus approfondi, voici un lien vers le rapport de travail du projet: https://github.com/albertaw/kendoui-areachart

. Résumé [19659006] Nous avons construit un graphique en aires montrant la propagation du tiret crypto-devise. Ensuite, nous avons créé un graphique en aires pour montrer les prix des offres et des demandes, les tracés de données se chevauchant et les données dans des volets distincts. Un graphique en aires peut également être visualisé sous forme de graphique empilé ou de graphique empilé à 100%. Un graphique à aires empilées vous permet de voir comment chaque série se compare à la totalité. Un graphique en aires empilées à 100% indique la relation pièce-entière sous forme de pourcentages.

Dans le prochain article, nous verrons comment créer un graphique en chandeliers. Un graphique en chandeliers est un graphique boursier qui indique les cours ouverts, les plus hauts, les plus bas et les plus proches.

Ressources

Essayez le Kendo UI par vous-même

Vous voulez commencer à tirer parti de plus de 70 produits prêts à l'emploi Composants de Kendo UI, comme la grille ou le planificateur? Vous pouvez commencer un essai gratuit de Kendo UI pour Vue dès aujourd’hui et commencer à développer vos applications plus rapidement.

Démarrer Mon essai d’interface utilisateur Kendo

Versions angulaire, réactionnelle et jQuery

Vous recherchez un composant d’interface utilisateur prenant en charge des cadres spécifiques? Vérifiez Kendo UI pour Angular Kendo UI pour React ou Kendo UI pour jQuery .