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é
de lowField de dateField
de la carte est utilisée comme catégorie. Dans la série, nous spécifierons le type
de openField
de hautField
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
Source link