Utilisation de composants d'interface graphique Vue Scatter ou Bubble Chart dans les applications Web

Les graphiques à dispersion et les graphiques à bulles peuvent vous aider à déterminer s'il existe une relation entre plusieurs variables. Voyez comment vous pouvez facilement les incorporer dans vos applications Vue.

Dans mon dernier post sur ce sujet, nous avons parlé de à l'aide d'un diagramme à barres avec de Kendo UI . Dans cet article, nous allons apprendre à utiliser le nuage de points et le diagramme à bulles.

Les nuanciers à nuage de points servent à déterminer s’il existe une relation entre deux variables. La force de la relation est déterminée par la proximité entre les points de données et une ligne. La direction de la ligne détermine s'il existe une relation positive, une relation négative ou aucune relation entre les variables. Les graphiques à bulles sont similaires aux graphiques à dispersion, sauf que vous pouvez comparer jusqu'à quatre variables. La taille et la couleur de la bulle représentent deux variables supplémentaires.

À venir, nous allons créer un tableau de dispersion pour tracer le prix et le volume des actions Amazon. Ensuite, nous allons créer un graphique à bulles pour tracer le prix, le volume et la capitalisation boursière d'un groupe d'actions.

Pour commencer

Nous allons tout d'abord initialiser un projet Vue à l'aide du modèle webpack-simple . ]. Ensuite, nous allons installer nos dépendances. Nous devrons installer Kendo UI, un thème, le paquet Charts et le paquet DataSource. Les commandes suivantes installent tous nos paquets:

 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 les packages. Nous enregistrons globalement les sources Chart et DataSource à l'aide des ChartInstaller et DataSourceInstaller 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   { Carte  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 nuage de points

Nous souhaitons pour voir s'il existe une relation entre le prix et le volume de notre stock. Si les prix augmentent à mesure que le volume augmente, les données doivent former une bande en pente ascendante. Cela pourrait être un bon signe que les prix sont à la hausse. Dans le modèle de notre fichier App.vue nous allons supprimer le balisage entre l'élément #app et ajouter un composant DataSource et Chart . . Le composant DataSource requiert un nom afin que nous puissions le référencer dans notre composant graphique, l'URL de notre service Web et le type de données de la réponse. Voici l'URL de notre demande:

 https://api.iextrading.com/1.0/stock/amzn/chart/6m

L'API que nous utilisons est fourni par IEX . Ce point de terminaison renverra les données de stock des six derniers mois pour Amazon. Voici à quoi ressemble un exemple de réponse:

 [
    {
        "date": "2018-07-02",
        "open": 1682.7,
        "high": 1713.89,
        "low": 1678.06,
        "close": 1713.78,
        "volume": 3185696,
        "unadjustedVolume": 3185696,
        "change": 13.98,
        "changePercent": 0.822,
        "vwap": 1699.05,
        "label": "Jul 2, 18",
        "changeOverTime": 0
    },
    …
]

Le composant Chart comprendra une référence à la source de données, un titre, une info-bulle, une série, un axe des x et un axe des y. La valeur de ces attributs sera définie dans les données du composant. Ceci est le modèle mis à jour avec les composants DataSource et Chart ajoutés:

 < modèle > 
   < div   id [19659054] =  " app "  > 
      < kendo-datasource 
       ref  =  " source de données  ] " 
      : transport-read-url  = "  ' https://api.iextrading.com/1.0/stock/amzn/chart/6m  ' " 
      : type de données transport-lecture  = " '  json  ' "  > 
     </  kendo-datasource > 
     < diagramme en kendo 
      : data-source-ref  =  " ' dataSource  ' " 
      : titre  = "  titre  " 
      : tooltip  = "  tooltip  " [19659058]: série  =  " série "  
      : Axe des abscisses  =  " xAxis "   19659058]: axe des ordonnées  =  " yAxis "  > 
     </  kendo-chart > 
   </  div > 
 </  template >  

Dans la partie script du composant, nous allons ajouter le texte pour le titre. Nous allons rendre l'info-bulle visible et lui donner un modèle. Pour la série, nous allons spécifier le type et définir les champs x et y. Ensuite, pour l'axe des x et des y, nous allons définir le texte du titre. Voici le script mis à jour:

 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      titre :   {
        text :   'Prix vs volume pour l'action Amazon' 
      } 
      Info-bulle :   {
        visible :   true 
        modèle :   'Volume: #: valeur.x #, Prix: $ #: valeur.y #' 
      } 
      série :   [ {
        type :   'dispersion' 
        xField :   'volume' 
        yField :   'close' 
      } ] 
      xAxis :   {
        titre :   {
          text :   'Volume' 
        } 
      } 
      yaxis :   {
        titre :   {
          texte :   'Prix de clôture' 
        } 
      } 
    } 
  } 
} 
 </  script >   ]

Il s'agit d'un lien vers le compte rendu de projet: https://github.com/albertaw/kendoui-scatterchart

Création d'un graphique à bulles

Nous voulons montrer la relation entre le volume. , prix et capitalisation boursière sur notre graphique à bulles. Nous examinerons un groupe d’actions dans le secteur du matériel informatique. Le volume sera notre variable x. Le prix sera la variable y. Et la capitalisation boursière sera à la taille de la bulle. Nous pourrions prédire que les actions avec le volume le plus élevé auront également le prix le plus élevé. Si tel est le cas, nous nous attendons à voir les points former une ligne qui a une pente ascendante. Ou, nous pourrions trouver que les actions avec une capitalisation boursière plus importante ont un prix plus élevé. Dans ce cas, les grosses bulles seront plus haut sur le graphique. Ce n'est peut-être pas le cas cependant et il est également possible qu'il n'y ait aucune relation entre les variables.

Les composants du graphique à bulles resteront pratiquement les mêmes. Il s'agit de l'URL que la source de données utilisera:

 https://api.iextrading.com/1.0/stock/market/collection/tag?collectionName=Computer+Hardware

Le titre et l'info-bulle vont également changer. Le type de série est changé en bulle. En plus des champs x et y, un champ de taille et de catégorie est ajouté à la série. Le champ de catégorie représente les actions individuelles. Par conséquent, nous utiliserons le symbole d’action pour cette entrée. Voici le script mis à jour:

 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
      titre :   {
        texte :   'Prix vs volume vs capitalisation boursière' 
      } 
      Info-bulle :   {
        visible :   true 
        template :   ' #: category #  Volume: #: value.x # 
 Prix: $ #: value.y #' 
      } 
     série :   [ {
      type :   'bulle' 
      xField :   'latestVolume' 
      yField :   'close' 
      sizeField :   'marketCap' 
      categoryField :   'symbole' 
     } ] 
     xAxis :   {
      titre :   {
        text :   'Dernier volume' 
      } 
     } 
     yaxis :   {
      titre :   {
        texte :   'Prix de clôture' 
      } 
     } 
    } 
  } 
} 
 </  script >  

Voici le lien vers le dépôt pour cet exemple: https://github.com/albertaw/kendoui-bubblechart

Résumé

Les graphiques à nuage de points et les graphiques à bulles sont utilisés pour voir comment les données sont liées. Une ligne de tendance indique s'il existe une relation entre les variables, la force de la relation et son orientation. Nous avons créé un diagramme de dispersion pour le stock Amazon afin de voir la relation entre le prix et le volume. Nous avons ensuite créé un graphique à bulles pour déterminer s’il existait une relation entre le volume, le prix et la capitalisation boursière des actions du secteur du matériel informatique. Nous avons seulement vu les bases de ce qui peut être configuré avec les graphiques. Il existe une autre variante du diagramme de dispersion, le diagramme de lignes de dispersion qui relie tous les points. Les diagrammes de dispersion et à bulles peuvent également être liés à des données groupées.

Dans le prochain article, vous verrez comment créer un graphique en secteurs.

Ressources

Essayez l’UI de Kendo par vous-même

Vous souhaitez commencer à tirer parti de plus de 70 composants prédéfinis de Kendo UI, comme le Grille ou planificateur? Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI pour Vue et commencer à développer vos applications plus rapidement.

Démarrer 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 .