Fermer

novembre 7, 2019

Reliure des graphiques et personnalisation dans l'interface utilisateur Telerik pour Blazor


Le composant Graphique de l'interface utilisateur Telerik pour Blazor vous donne deux modes de liaison des données. Tous deux vous permettent de personnaliser le graphique au moment de l'exécution, notamment en choisissant les données à afficher.

Dans un article précédent, Création de graphiques avec le composant de graphique Telerik pour Blazor j'ai montré: comment représenter graphiquement des données qui ne proviennent pas de votre source de données dans le format souhaité. Mon composant récupérait un ensemble d'objets de transfert de données que je devais filtrer et transformer pour obtenir les données que je souhaitais représenter graphiquement. Il me fallait essentiellement générer deux collections correspondantes: l'une avec les «données à représenter» (axe vertical ou axe des ordonnées) et l'autre avec les catégories de ces données (les étiquettes horizontales ou l'axe des abscisses).

, si les objets de données que vous voulez représenter contiennent à la fois les “données à représenter” et le libellé de catégorie à utiliser – autrement dit, si chaque objet fournit toutes les données pour un point du graphique,

Série indépendante contre données avec étiquettes

Mon étude de cas de cette colonne précédente utilisait ce que Telerik appelle «reliure indépendante». Pour un graphique linéaire, cela signifie que le graphique Telerik est lié à deux collections distinctes: une qui contient les données à représenter (l’axe vertical ou l’axe des Y), et une autre qui contient les catégories (les étiquettes qui sont alignées horizontalement). Axe des X)

Avec la liaison Série indépendante, je lie le champ contenant ma collection «data to be graphed» (quantitésSold, une collection d’entiers) à l’élément ChartSeries à l’aide de son attribut Data; Je lie le champ contenant ma collection d'étiquettes de catégorie (mois, une collection de chaînes) à l'élément ChartCategoryAxis à l'aide de son attribut Catégories.

Voici le balisage qui exploite la liaison Independent Series:

 < TelerikChart   Width  =  " 75% "  > 
     < ChartSeriesItems > 
         < Type de série   Type [19659000] ] =  " @selectedType "    Les données  =  " @ les quantités vendues "  >  < /  ChartSeries > 
     </  ChartSeriesItems > 
     < ChartCategoryAxes > 
         < ChartCategoryAxes > 
         <  " @months "  >  </  ChartCategoryAxis > 
     </  ChartCategoryAxes >  < /  TelerikChart [1 9659011]> 

 @code  {
    privé IEnumerable  < objet >  quantités vendues ; 
    chaîne privée  []  months ;

Toutefois, si la collection que vous récupérez se compose d'objets contenant à la fois les données à représenter et les données de catégorie … Dans ce cas, les choses deviennent plus simples: il suffit de passer cette collection au graphique pour que les résultats soient représentés graphiquement. Dans Telerik UI for Blazor, cela s'appelle la liaison «Attacher une série à leurs catégories».

Par exemple, les objets SalesDTO que je veux représenter graphiquement ont une propriété QuantitySold (les données à représenter) et une propriété Month (le nom de le mois pour les ventes). Il n’ya aucune raison pour que je ne puisse pas utiliser la propriété Month comme étiquette pour les données QuantitySold. Dans ce cas, étant donné que chaque objet SalesDTO contient à la fois les données et l'étiquette d'un point du graphique, je peux simplement transmettre ma collection SalesDTO au composant Telerik Chart et tout ira bien.

Avec l'attachement de la série à Leurs catégories ”dans l’élément TelerikChart, j’ai juste besoin de l’élément ChartSeries. Je lie toujours l'attribut Data de ChartSeries, mais cette fois, je le lie à une collection d'objets plutôt qu'à des valeurs – dans ce cas, une collection de mes objets SalesDTO.

Je dois ajouter deux attributs supplémentaires à l'objet. Élément ChartSeries:

  • L'attribut Field (que j'ai défini comme nom de la propriété sur l'objet SalesDTO contenant les «données à représenter»)
  • L'attribut CategoryField (que j'ai défini comme nom de la propriété contient l'étiquette de la catégorie)

Dans mon cas, les données à représenter se trouvent dans la propriété QuantitySold et l'étiquette de ces données se trouve dans la propriété Month. En conséquence, je peux créer un graphique de tous mes objets SalesDTO avec uniquement ce balisage et le champ contenant mes objets SalesDTO:

 < TelerikChart   Width  =  " 75%  " > 
     < ChartSeriesItems > 
         < des séries de cartes   des données  = "  @  graphSales  "   Field  = "  Quantité vendue  "   CategoryField  = " [19459106] " Mois  " >  </  Série ChartS > 
     </  ChartSeriesItems > 
 </  TelerikChart > @code  {
    private IEnumerable  < SalesDTO >  graphSales ;

Prise en charge de la personnalisation

En clair, Independent Series vous offre plus de flexibilité pour mélanger et faire correspondre les données et les étiquettes. Avec Independent Series, je peux manipuler mes données d’entrée de la manière dont je veux créer les points sur le graphique, en les synthétisant ou en les transformant au besoin. Il n’existe aucun lien nécessaire entre les données entrantes et les points de mon graphique.

Lorsque vous associez des données de série à leurs catégories, chaque objet de ma collection doit avoir une relation un à un avec un point du graphique. De plus, chaque objet de la collection doit contenir à la fois ses données et son "label officiel" – et ce label doit être quelque chose que je suis prêt à mettre dans mon interface utilisateur.

Avec Independent Series, les données et les étiquettes peuvent provenir de sources complètement différentes. Dans mon étude de cas, par exemple, où je comparais les chiffres de vente aux noms de mois, mes noms de mois («janvier» à «décembre») auraient facilement pu être codés en dur dans ma demande.

Mais je ne perds pas grand-chose en termes de flexibilité lorsque j'utilise Attacher des données de séries à leurs catégories. Par exemple, dans un autre article, Création de graphiques personnalisables à l'aide du composant de graphique Telerik pour Blazor je peux laisser l'utilisateur sélectionner les données à afficher et le type de graphique souhaité (barre, ligne, zone, etc.). .) Certaines options de personnalisation deviennent en réalité plus faciles si j'utilise Attacher des éléments de la série à leurs catégories.

Par exemple, supposons que je souhaite donner à l'utilisateur la possibilité de choisir entre le nombre d'unités vendues et le montant total vendu. pour. Ce sont deux propriétés différentes sur mon objet SalesDTO: QuantitySold et ValueSold. Je peux le faire avec les deux mécanismes de liaison.

Quelle que soit la méthode de liaison choisie, je commence de la même manière: En donnant à l'utilisateur un outil pour choisir les données qu'il souhaite. Pour cela, je vais fournir une liste déroulante montrant les deux options liées à un champ qui contiendra le choix de l'utilisateur:

 Données:  <sélectionnez   @bind  = [19659011] "[ propertyName "  > 
     < option   value  =  " Quantité vendue "  " [1965911] ]>  Montant  </  option > 
     < option   value  =  " ValueSold "  >  Valeur  </  option > 
 </  sélectionnez > 

 @code  {.
    private string propertyName ;

Modification des données avec des séries indépendantes

Si j'utilise des séries indépendantes, j'aurai déjà configuré un champ IEnumerable pour contenir les données à représenter graphiquement. Dans mon post précédent, ce champ ressemblait à ceci:

 private IEnumerable  < object >  amountSold ;

Parce que le champ quantitativeSold est une liste de type object, I peut charger le champ avec toutes les données que je veux. Cela fonctionne bien pour moi parce que QuantitySold est de type int, alors que ValueSold est de type décimal.

Cela dit, je vais toutefois avoir besoin de "malins" (par ce que je veux dire: "illisible et incontrôlable"). LINQ pour basculer entre les deux propriétés, ou je vais avoir besoin de deux instructions LINQ. Je préfère la solution avec deux instructions LINQ… ce qui signifie également que je devrai réécrire mon champ propertyName dans une propriété à part entière.

Ce code, par exemple, donne à l'utilisateur la possibilité de basculer entre QuantitySold et ValueSold à la volée:

 chaîne privée nom propre ; 
    chaîne privée propertyName
     {
        get  {  return  prénom_nom ;  } 
        ensemble
         {
            propertyname  =  value ; 
             switch   ( propertyname ) 
             [
                 boîtier   "Quantité vendue" : 
                    quantitésSold  =  de s dans graphSales
                                     où s .  Année  ==  année sélectionnée
                                     orderby s .  Mois
                                      sélectionnez   ( objet )  s .  Quantité ; 
                     pause ; 
                 affaire   "ValueSold" : 
                    quantitésSold  =  de s dans graphSales
                                     où s .  Année  ==  année sélectionnée
                                     orderby s .  Mois
                                      sélectionnez   ( objet )  s . . ValueSold ; 
                     pause ; 
            } 
        } 
     ]}

(Remarque: à présent que mon champ "data to be graphed" contient deux types de données différents, je devrais probablement le renommer avec un nom plus neutre que "QuantitySold" – peut-être "dataToBeGraphed"). [19659134] Modification des données avec Attacher des séries de données à leurs étiquettes

Avec Attacher des éléments de séries à leurs catégories, la solution est beaucoup plus simple: elle nécessite simplement une couche d'indirection. Au lieu de définir l'attribut Field de ChartSeries sur le nom d'une propriété, j'ai défini l'attribut sur un champ contenant le nom de la propriété.

J'ai déjà lié ma liste déroulante à un champ appelé propertyName. utilisez ce champ propertyName dans l'attribut de champ de ChartSeries, comme suit:

  < ChartSeries Data  =  "@ graphSales"  Field  =  "@ propertyName "
                                                              CategoryField  =  "Mois" >

Et, comme ma liste déroulante met automatiquement à jour mon champ propertyName, elle peut redevenir un champ:

 chaîne privée propertyNameName  ;

Désormais, lorsque l'utilisateur sélectionne un nom de propriété dans ma liste déroulante, le champ propertyName sera automatiquement mis à jour avec le nom de la propriété et le graphique se régénérera avec les nouvelles données.

Comme vous vous en doutez probablement. , chaque nuage d’argent est entouré d’un nuage. Joindre des éléments à leurs catégories peut considérablement simplifier la création de votre graphique, voire même de fournir à votre utilisateur des options de personnalisation. Si vos données entrantes ne répondent pas aux critères d’attachement d’éléments à leurs catégories, il peut être judicieux de regrouper vos données entrantes dans un format dans lequel chaque objet représente un point du graphique contenant à la fois les données et l’étiquette. Là où ce n’est pas possible (ou demande trop d’efforts pour en valoir la peine), la série Independent Series répondra à vos besoins avec une certaine perte de flexibilité.

Ou, comme je le dis à mes clients: «Vous avez le choix: voulez-vous que votre bras soit coupé ou déchiré? »

Essayez-le aujourd'hui

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

Le meilleur outil 2023 pour ta croissance Instagram !



Source link