Utilisation d'un composant d'interface graphique Vue Pie et Donut dans votre application Web

Les diagrammes à secteurs et en beignets sont des cercles avec des tranches qui représentent des catégories (le beignet a un trou au milieu). Voyez comment vous pouvez facilement les ajouter à vos applications pour visualiser diverses données.

Dans mon dernier article sur le sujet, nous avons traité des graphiques en nuages ​​de points et à bulles dans Vue avec de Kendo UI . Dans cet article, nous passerons en revue le graphique à secteurs et en anneau.

Un graphique à secteurs est un cercle avec des tranches représentant chaque catégorie. Un graphique en anneau est similaire à un graphique en cercle, sauf qu'il existe un trou au centre. Le but de ces graphiques est de montrer comment chaque catégorie se compare à la valeur totale de toutes les catégories. Il est préférable d’utiliser les diagrammes à secteurs et en anneau lorsque vous n’avez que quelques catégories et que le total donne 100%. Par exemple, vous pouvez créer un graphique montrant les dépenses par catégorie. Les catégories pourraient être les factures, la nourriture et les divertissements. Combinés, ils constituent votre dépense totale. Ensuite, nous allons créer un graphique à secteurs montrant les bénéfices par action. Nous créerons ensuite un graphique en anneau illustrant la capitalisation boursière par action.

Création du graphique à secteurs

Nous allons d’abord créer un graphique à secteurs utilisant des données locales. Nous devrons initialiser un projet Vue à l'aide du modèle webpack-simple . Ensuite, installez le package Charts l’interface utilisateur de Kendo et un thème. Les commandes suivantes installent ces paquets:

 npm   install  --save @ progress / kendo-ui
 npm   installez  --save @ progress / kendo-theme-default
 npm   installez  --save @ progress / kendo-charts-vue-wrapper

Nous importons ensuite les packages de notre fichier main.js puis enregistrons le composant Chart globalement et l'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   { des cartes  des installateurs de cartes }   de   '@ progress / kendo-charts-vue-wrapper' 

Vue .  utilisez  ( ChartInstaller ) 

 nouveau   Vue  ( {
  el :   '# app' 
  composants :   {
  Graphique
  } 
  render :  h  =>   h  ( App ) 
} ) 

Dans le fichier App.vue nous ajoutons le composant graphique au modèle. Nous allons définir le titre, la légende, la bulle d'aide, la série et le thème du graphique. Le modèle suivant est le suivant:

 < modèle > 
   < div   id  =  " app "  [ 19659024]> 
     < kendo-chart 
      : titre  =  " titre "  
      : légende  =  "  légende  " 
      : info-bulle  = "  tooltip  " 
      : série  = "  ] série  " 
      : thème  = "  ' matériau '  " > 
     </  kendo-chart > 
   </  div > 
 </  template >  

La valeur des attributs du graphique sera définie dans les données du script. La configuration la plus importante est la série. Le type de série est défini sur camembert. Les données de la série contiennent un tableau avec chaque élément spécifiant la catégorie et la valeur. Les catégories sont Apple, Amazon, IBM et Microsoft. Les valeurs correspondent au bénéfice brut déclaré dans le compte de résultat de chaque société pour 2017. Les données proviennent du site Nasdaq . Ceci est le script mis à jour.

 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
     titre :   {
      texte :   'Bénéfice brut' 
     } 
     légende :   {
      position :   'top' 
     } 
     infobulle :   {
      visible :   true 
      format :   '$ {0: N}' 
 
     } 
     série :   [ {
      type :   'pie' 
      données :   [ {
        catégorie :   'Pomme' 
        valeur :   101839000000 
      }  {
        catégorie :   'Amazon' 
        valeur :   65932000000 
      }  {
        catégorie :   'IBM' 
        valeur :   36227000000 
      }  {
        catégorie :   'Microsoft' 
        valeur :   72007000000 
      } ] 
      étiquettes :   {
        visible :   true 
        modèle :   '#: category #' 
      } 
     } ] 
    } 
  } 
} 
 </  script  >  

Ceci est le lien vers le référentiel du code: https://github.com/albertaw/kendoui-piechart

Graphique en forme de donut

Nous allons ensuite créer un graphique en forme de donut. . Cette fois, nous utiliserons les données d'une API. Cela signifie que nous aurons besoin du composant DataSource . La commande suivante installera le paquet DataSource .

 npm   install  --save @ progress / kendo-datasource-vue-wrapper

Ensuite, nous allons importer le package dans notre fichier main.js enregistrer le composant globalement et l'ajouter à la liste des composants. Ceci est le fichier mis à jour:

 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   { source de données  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 ) 
} ) 

Ensuite, nous déclarons le composant DataSource à l'intérieur du modèle de notre fichier App.vue . Le DataSource a besoin d'un nom pour le référencer, d'un type de données et d'une URL. Le type de données est JSON. L’URL est un point de terminaison de l’API fourni par IEX et se lit comme suit:

 https://api.iextrading.com/1.0/stock/market/list/gainers 

L’API renverra un liste des actions considérées gagnantes. Le composant graphique restera pratiquement le même, sauf que nous ajouterons une référence à notre composant DataSource. Voici le modèle mis à jour:

  < modèle > 
   < div   id  =  " app "  [ 19659024]> 
     < kendo-datasource 
       ref  =  " dataSource "  
      : transport-read-url  = 19659024] " ' https://api.iextrading.com/1.0/stock/market/list/gainers ' "  
      : transport-read-data- type  =  " ' json ' "  > 
     </  de la source de données kendo > 
     < kendo-chart 
      : data-source-ref  =  " ' source de données ' "  
      : titre : titre  ] =  " titre "  
      : légende  =  " légende "  
      : tooltip  =  " tooltip "  
       : série  =  " série "  
      : theme  =  " ' matériel ' "  > 
     </  kendo-chart > 
   </  div > 
 </  modèle >  ] 

Dans le script, nous allons changer le titre et les données de la série. Le type de série devient de beignet . Nous ne listerons plus une catégorie et une valeur pour chaque donnée. Au lieu de cela, nous spécifierons un champ et categoryField . Nous utiliserons le champ marketCap pour nos valeurs et le symbole boursier pour les catégories. Ceci est le script mis à jour.

 < script > 
 export   default   {
  nom :   'app' 
   données   ()   {
     retour   {
     titre :   {
      texte :   'Capitalisation boursière' 
     } 
     légende :   {
      position :   'top' 
     } 
     infobulle :   {
      visible :   true 
      format :   '$ {0: N}' 
 
     } 
     série :   [ {
      type :   'beignet' 
      champ :   'marketCap' 
      catégorieField :   'symbole' 
      étiquettes :   {
        visible :   true 
        modèle :   '#: category #' 
      } 
     } ] 
    } 
  } 
} 
 </  script  >  

Il s'agit du lien vers le référentiel: https://github.com/albertaw/kendoui-donutchart

Résumé

Nous avons créé un diagramme à secteurs à l'aide de données locales. comparer le bénéfice par stock. Nous avons ensuite créé un graphique en anneau utilisant des données distantes pour comparer la capitalisation boursière par action. Les segments de chaque graphique représentent un pourcentage du total. Sur la base des données fournies, le composant calculera automatiquement les pourcentages. Lors de la construction d'un graphique en secteurs ou en anneau, il est important d'identifier quelles sont les catégories et qu'elles totalisent 100%. Dans nos exemples, les stocks étaient les catégories. Toutes les valeurs additionnées constituent notre total. Ensuite, ils ont été convertis en pourcentage afin que nous puissions voir quelle part du total chaque catégorie avait.

Dans le prochain article, nous allons apprendre à créer un graphique à secteurs. Un graphique en aires est semblable à un graphique en courbes mais l'espace entre la ligne et l'axe est rempli.

Ressources

Essayez le Kendo UI pour vous-même

Vous souhaitez commencer à tirer parti de plus de 70 ready-made Composants de Kendo UI, comme la grille ou le planificateur? Vous pouvez commencer dès aujourd'hui à essayer gratuitement Kendo UI pour Vue et commencer à développer vos applications plus rapidement.

Commencer 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 .