Fermer

juin 21, 2019

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


Un graphique en chandeliers est un graphique boursier qui permet de visualiser la performance d'une action, notamment les valeurs les plus élevées, les plus basses et les plus proches. Voyez comment vous pouvez facilement l'ajouter à vos applications Web.

Dans l'article précédent, nous avons appris à créer un graphique à aires avec de l'interface utilisateur de Kendo pour Vue . Dans cet article, nous allons créer un graphique en chandeliers.

Un graphique en chandeliers indique les valeurs d'ouverture, de valeur maximale, de valeur minimale et de valeur de clôture pour un stock. Il a une partie solide qui est le corps et deux mèches s'étendant au-dessus et au-dessous du corps. Le corps montre la plage entre le prix d'ouverture et de fermeture. Le haut de la mèche supérieure représente le cours le plus élevé. Le bas de la mèche inférieure est le prix le plus bas. Les graphiques en chandeliers sont utilisés pour analyser les tendances des mouvements de prix, par exemple si le prix évolue dans une tendance à la hausse ou à la baisse. Ensuite, nous allons créer notre graphique en utilisant les données boursières extraites d'une API.

Getting Started

Nous allons tout d'abord initialiser notre projet à l'aide du modèle Vue webpack-simple . Ensuite, nous installerons Kendo UI, un thème, ainsi que les composants Chart et DataSource .

 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 les packages sont importés. Les graphiques et DataSource sont enregistrés dans le monde entier et ajoutés à 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 du graphique

Notre Notre ] Le composant Graphique comprend une référence au composant de source de données, un titre, un champ de date, une série et un thème. Le composant de source de données a besoin d'une URL et d'un type de données. Les données sont fournies par IEX . Nous allons utiliser le point de terminaison de l'API pour extraire les données de stock d'Amazon pendant un an. Voici l'URL:

 https://api.iextrading.com/1.0/stock/amzn/chart/1y

La propriété dateField de la carte est utilisée comme catégorie. Dans la série, nous spécifierons le type de openField de hautField de de lowField de closeField de . couleur et downColor . Les couleurs et downColor sont utilisées pour remplir le corps du chandelier. Si la clôture est supérieure à l'ouverture, le prix a augmenté. La valeur de l'option color est utilisée pour remplir le corps dans ce cas. Si l'ouverture est supérieure à la clôture, cela signifie que le prix a baissé. Le corps sera la valeur du downColor . Dans le fichier App.vue nous ajoutons les composants DataSource et Chart au modèle ainsi que les données du graphique au script.

 < > 
  < div   id  =  " app "  > 
  < kendo-dataource [19659056] ref  =  " dataSource "  
 : transport-read-url  =  " ' https: // api.iextrading.com/1.0/stock/amzn/chart/1y ' " 
 : type de données de transport transport  = " '  json  ' " > 
  </  kendo-datasource > 
  < kendo-stockchart 
 : data-source -ref  =  " ' source de données ' "  
 : title  =  " titre
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link