Création de graphiques avec le composant de graphique Telerik pour Blazor

Le composant Graphique de Telerik pour Blazor facilite la création de graphiques, il vous facilite également la sélection des données à afficher.

The Telerik UI for Blazor Le composant graphique propose deux méthodes pour lier des données. Une méthode est appropriée lorsque chaque point du graphique est représenté par un seul objet contenant à la fois les «données à représenter» (axe vertical / axe Y) et la catégorie de données (étiquettes horizontales / axe X). Dans ce scénario, vous ne devez disposer que d'une seule collection d'objets que vous transmettez au graphique (l'équipe Telerik appelle cette liaison "Attacher les éléments de la série à leurs catégories".)

est dans le format souhaité par l'utilisateur pour son graphique. En réalité, les données ne correspondent généralement pas au format de votre graphique. Heureusement, l'option de liaison de données la plus flexible du graphique Telerik («Série indépendante») vous permet de transformer vos données entrantes en données dont votre graphique a besoin.

Dans la reliure de la série indépendante, vous transmettez deux collections au graphique: Une collection de “Data to be graphed” et une autre collection d ’“ étiquettes de catégorie ”. Avec ce style de reliure, vous pouvez répartir vos données entrantes dans les deux collections pour obtenir le graphique souhaité par votre utilisateur.

Reliure à une série indépendante: Chaque collection doit avoir le même nombre d'éléments et l'ordre de chaque collection doit correspondre (c'est-à-dire que la première étiquette de la collection de catégories doit correspondre au premier élément de la collection «données à représenter»). [19659006] Dans mon cas, je récupère une collection d'objets de transfert de données (DTO) qui ne correspondent pas à des points du graphique. Je dois manipuler mes DTO pour extraire les données souhaitées. En particulier, je récupère une collection d'objets SalesDTO, chaque objet SalesDTO ayant plusieurs propriétés utiles: CustomerId, Année, Mois, Quantité vendue, Valeur vendue, etc. Malheureusement, je souhaite uniquement représenter graphiquement certains de ces DTO. Je dois donc extraire

Dans un composant Blazor, le code permettant d'extraire les SalesDTO initiaux d'un seul client dont l'identifiant est transmis à mon composant sous forme de paramètre peut être aussi simple que cela:

 [ Paramètre ] 
public  int  custId  { get ;  set ; } 

@code  {
   private IEnumerable  < SalesDTO >  graphSales ; 

   tâche asynchrone protégée  OnInitializedAsync  () 
     {
       graphSales  =  wait SalesRepository .  GetSalesByCustomerIdAsync  ( custId ) ; 
       wait base .  OnInitializedAsync  () ; 
    } 

Ma première étape de la représentation graphique de ces données consiste à créer les deux collections dont j'ai besoin de cette collection d'objets SalesDTO. : Les numéros de vente (les «données à représenter», les données d'axe vertical ou Y) et les catégories pour chacun de ces numéros de vente (les étiquettes, les données de l'axe horizontal ou X). Pour ce graphique, je vais simplement extraire la quantité vendue pour chaque mois (les données de l’axe des Y) et les noms des mois (les étiquettes de catégorie de l’axe des X). Ma première étape consiste à déclarer deux champs contenant les données à représenter (un champ que j'appellerai quantités vendues ) et les catégories correspondant à l'axe des X (j'appellerai ce champ mois ).

Pour pouvoir utiliser la carte Telerik, ces champs doivent ressembler à ceci:

 private IEnumerable  object >  amountSold ; 
chaîne privée  []  mois ; 

Je dis «obligé» car il existe également certaines restrictions. Les données à cartographier doivent être une collection de IEnumerable et la collection de noms de catégories doit être un tableau d'objets ou de chaînes (j'ai utilisé string dans mon exemple).

Bien que ma méthode GetSalesByCustomerIdAsync ait renvoyé tous les ventes pour le client pour chaque année, je veux seulement représenter graphiquement les ventes pour l'année en cours. De plus, je souhaite uniquement indiquer sur le graphique les mois où le client a réellement acheté quelque chose. Le code permettant de remplir les champs de mes objets SalesDTO uniquement avec les données souhaitées ressemble à ceci (pour l'instant, ce code est également inclus dans la méthode OnInitializedAsync de mon composant):

 QuantitySold  =   ( de s dans graphSales
                                où s .  Année  ==   "2018" 
                               orderby s .  MonthOrder
                              sélectionnez   ( objet )  s .  Quantité vendue ) ; 
months  =   ( de s dans graphSales
                   où s .  Année  ==   "2018" 
                  orderby s .  MonthOrder
                  select s .  Mois ) .  Distinct  () .  ToArray  () ;         

Affichage des données

Après avoir préparé les deux collections requises (données et étiquettes), il est facile de configurer le graphique pour afficher les données. Tout d'abord, j'ajoute le graphique à mon composant à l'aide de l'élément TelerikChart. La largeur par défaut d'un graphique est presque toujours trop étroite. Dans cet exemple, j'ai également défini la largeur du graphique sur toute la largeur du conteneur dans lequel se trouve le graphique:

 < TelerikChart   Largeur  =  " 100% "  > 
 </  TelerikChart  >  

La prochaine étape consiste à ajouter les données à représenter (mon axe Y). Je le fais avec un élément ChartSeries à l'intérieur de l'élément ChartSeriesItems. Sur un élément ChartSeries, je dois utiliser l'attribut Données pour lier la série à mes quantités vendues du champ «données à représenter». Dans cet exemple, j'ai également utilisé l'attribut Type pour spécifier le type de graphique souhaité (une ligne). graphique dans ce cas). Je n'ai pas à spécifier le type, mais si ce n'est pas le cas, j'obtiendrai un graphique de type colonnes (un graphique à barres avec les barres s'élevant verticalement à partir de l'axe X), ce qui n'est pas ce que je veux. . Voici l'élément ChartSeries configuré pour afficher mes quantitésVendu sous forme de graphique linéaire:

 < TelerikChart   Width  =  " 100% "  


 > 
    < ChartSeriesItems > 
         < ChartSeries   Type  =  " ChartSeriesType.Line "  de données  . 19659047] =  " @quantitiesSold "   >    
    </  ChartSeriesItems >  

Ma prochaine étape consiste à spécifier les données. source pour les catégories de l'axe X (qui sont conservées dans le champ mois). Je le fais avec un élément ChartCategoryAxis à l'intérieur d'un élément ChartCategoryAxes. J'utilise l'attribut Categories de ChartCategoryAxis pour lier l'axe des abscisses à mon champ contenant les noms des mois. Voici ce balisage:

   </  ChartSeriesItems > 
   < ChartCategoryAxes > 
     < ChartCategoryAxis   Catégories  =  @months  " >  </  ChartCategoryAxis > [1965904] >  

Ceci donne à l'utilisateur l'affichage de la figure 1 ci-dessous.

Et c'est la beauté de la reliure Independent Series: Quel que soit le format de votre entrée vous pouvez toujours donner à vos utilisateurs le graphique qu'ils souhaitent.

Essayez-le aujourd'hui

Pour en savoir plus sur l'interface utilisateur de Telerik pour les composants Blazor et sur ce qu'ils peuvent faire, consultez la page de démonstration de Blazor ou téléchargez un essai pour commencer immédiatement à se développer.