Comment utiliser un composant d'interface graphique à barres de vue dans votre application Web

Découvrez comment utiliser facilement les graphiques à barres de vos applications pour comparer des données avec une plage de valeurs dans le temps, comme le cours des actions, comme nous le verrons dans cet exemple.

Dans mon dernier article sur ce sujet, j'ai couvert en utilisant une vue linéaire avec Kendo UI . Aujourd'hui, vous allez apprendre à créer un graphique à barres à l'aide de Kendo UI et de Vue.

Dans un graphique à barres, chaque élément de données est représenté par une barre verticale ou horizontale. Nous utiliserons un graphique à barres pour comparer les prix des actions Amazon sur un mois. En tant que trader en valeurs mobilières, nous souhaitons connaître la fourchette des prix afin de pouvoir élaborer une stratégie visant à rentabiliser les échanges. Si nous constatons que le cours actuel des actions est inférieur aux cours passés, nous voudrons peut-être acheter des actions. D'autre part, si nous constatons que le cours des actions est plus élevé que d'habitude, il se peut que nous voulions vendre notre stock ou le conserver. Nous allons d’abord créer un graphique pour représenter graphiquement le cours de clôture. Nous créerons ensuite un graphique à barres groupées pour représenter graphiquement les prix les plus élevés et les plus bas. Enfin, nous allons créer un diagramme à barres de fourchette du prix le plus élevé et du prix le plus bas. Tout d'abord, nous initialisons le projet à l'aide du modèle Vue webpack-simple . Nous allons utiliser les composants DataSource et Chart dans notre projet afin d'installer le wrapper Vue avec le package Kendo UI et le thème par défaut.

 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

Ensuite, nous importons ces packages dans notre fichier main.js enregistrons les composants globalement et 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   { Graphique  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 ) 
} ) 

Création d'un graphique à barres

Les données nous utilisons est fourni par IEX . IEX dispose d'une API publique gratuite permettant de récupérer des informations sur les stocks. Il a été choisi parce que l’API est facile à comprendre et que la réponse est bien formatée pour nous, de sorte que nous n’avons pas à faire de prétraitement. Voici l'URL que nous utiliserons pour formuler notre demande:

 https://api.iextrading.com/1.0/stock/googl/chart

Cela nous donnera les données quotidiennes pour le stock Amazon pour une période d'un mois. L'API donne la possibilité de choisir une période d'un jour, trois mois, six mois, un an, deux ans ou cinq ans. Nous avons choisi de nous en tenir à la valeur par défaut, un mois, car il est prévu d’échanger les actions rapidement et de ne pas les conserver à long terme. Nous sommes donc intéressés à voir s'il existe des tendances à court terme qui peuvent être utilisées à notre avantage. Ceci est un exemple de réponse de l'API:

 [
   {
     "date" :   "2018-11-26" 
     "open"  :   1539 
     "high" :   1584.81 
     "low" :   1524.22 
     "fermer ":   1581.33 
    " volume ":   6257716 
    " volume non ajusté ":   6257716 . 19659050] "changement" :   79.27 
     "changementPour cent" :   5.277 
     "vwap" :   1558.62 [VC902] 19659029]
     "label" :   "26 nov." 
     "changeToute Heure" :   0 
  } 
  . .. 
] 

Ensuite, nous déclarons les composants DataSource et Chart dans le modèle de notre fichier App.vue . Dans le composant DataSource, nous attribuerons l'attribut ref à dataSource l'URL transport-read-url à l'URL de notre API et le transport- le type de données en lecture est json . Dans le composant Graphique, nous allons faire référence à notre composant DataSource, ajouter un titre, positionner la légende au bas du graphique, rendre les info-bulles visibles et attribuer au graphique un thème . Les séries les axes de catégories et les axes de valeurs seront configurées dans les données du composant. Voici le fichier App.vue mis à jour:

 < template > 
   < div   id  =  " ] app  " > 
     < kendo-datasource 
       ref  = "  source de données  " 
      : transport-read-url  =  " ' https://api.iextrading.com/1.0/stock/amzn/chart ' "  
       ]: transport-read-data-type  =  " ' json ' "  > 
     </  kendo- source de données > 
     < kendo-chart 
      : data-source-ref  =  " ' source de données ' "  ] 
      : title-text  =  " ' Prix de l'action Amazon ' "  
      : position-légende  =  ] " ' en bas ' " [1 9459004] 
      : tooltip-visible  =  " true "  
      : tooltip-template  =  ""  ' #: series.name #: $ #: value #  ' " 
      : theme  = " '  matériau  ' ] " 
      : série  = "  série  " 
      : axe de la catégorie  = "  categoryAxis [194590)] " 
      : axe de la valeur  = "  valueAxis  "  [
     </  de kendo-chart > 
   </  div > 
 </  template > 

 < script > 
 export   default   {0} 
  nom :   'app' 
   données   ()   {
     retour   {
      série :   [ {
        type :   'colonne' 
        nom :   'Fermer' 
        champ :   'close' 
      } ] 
      catégorieAxis :   {
        champ :   'label' 
      } 
      valueAxis :   {
        étiquettes :   {
          format :   '$ {0}' 
        } 
      } 
    } 
  } 
} 
 </  script > 


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

Création d'un graphique à barres groupée

Ensuite, nous voulons comparer le prix haut et bas du stock. Nous sommes intéressés à voir combien ils varient chaque jour. Un graphique à barres groupées nous permet de comparer plusieurs champs pour chaque catégorie. Nous pourrons afficher la barre pour le haut et le bas pour chaque jour, l'un à côté de l'autre. La différence de hauteur des barres nous permettra de voir rapidement s'il existe des différences dramatiques. Cela nous permet également d’avoir une idée de la portée des données. Pour créer un histogramme groupé, nous allons ajouter deux séries aux données. La première série utilisera le champ bas et la seconde série utilisera le champ haut . Le code suivant remplace les données de la série dans le script:

 série :   [ {
  type :   'colonne' 
  nom :   'Faible' 
  champ :   'low' 
} 
 {
  type :   'colonne' 
  nom :   'Haut' 
  champ :   'élevé' 
} ] 

Création d'un graphique à barres de plage

Une autre façon de comparer les prix haut et bas consiste à utiliser un diagramme à barres. Le bas d'un graphique à barres d'intervalle est la valeur minimale et le haut est la valeur maximale. Dans notre exemple, le bas prix sera marqué par le bas de la barre et le prix élevé par le haut. Il est plus facile de voir la différence entre le haut et le bas de cette façon parce que nous avions beaucoup de valeurs à comparer et qu’elles avaient presque la même hauteur. Le fait de ne voir que la fourchette de prix nous aide à voir combien les prix varient. La profondeur de la barre nous donne un indice sur la volatilité des prix. Pour créer un graphique à barres de plage, nous allons d'abord changer notre modèle d'info-bulle à la valeur suivante:

: tooltip-template = "'$ #: value.from # - $ #: value.to #'"

Dans les données de composant, il suffit de spécifier une série et de définir le deField qui est bas et le toField qui est haut .

 série :   [ {
  type :   'rangeColumn' 
  nom :   'Haut et Bas' 
  fromField :   'bas' 
  toField :   'high' 
} ] 

Voici un lien vers le projet final: https://github.com/albertaw/kendoui-barchart

Résumé

Les graphiques à barres sont les meilleurs utilisé pour comparer des données qui ont des catégories discrètes. Premièrement, nous avons créé un graphique à barres verticales pour comparer les prix de clôture de nos actions. Pour notre exemple, les catégories étaient des jours. Nous avons ensuite créé un graphique à barres groupées pour comparer les prix haut et bas. Les histogrammes groupés nous permettent de comparer différentes séries côte à côte. Enfin, nous avons créé un diagramme à barres de la fourchette des prix hauts et bas. Un graphique à barres d'intervalle nous donne une meilleure vue pour comparer les différences entre deux valeurs. Il existe également des graphiques à barres empilées que nous n’avons pas vus. Un graphique à barres empilées est utilisé pour comparer la taille d'un groupe à l'ensemble.

Dans le prochain article, nous étudierons les diagrammes de dispersion. Restez à l'écoute.

Ressources

Essayez vous-même l'interface utilisateur de Kendo

Vous souhaitez commencer à tirer parti de plus de 70 composants prêts à l'emploi de Kendo UI, tels que Grid ou Scheduler? Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI pour Vue et commencer à développer vos applications plus rapidement.

Lancer mon essai de l'interface utilisateur de Kendo

Versions angulaire, réaction 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 .