Graphique à barres
Affichez un graphique à barres en posant Type="bar" sur le FluentUIChart composant. Passer une liste d’étiquettes de catégories et un ou plusieurs ChartDataset objets pour définir les barres. FluentUIChart est un enveloppe thématique autour du composant sous-jacent Chart , construit sur Chart.js.
Exemple de données statiques
Un graphique à barres avec trois ensembles de données non coloriées — les couleurs sont complétées à partir de la palette active Fluent. Cliquez sur n’importe quelle barre pour voir la charge utile de l’événement de clic, et basculez le thème du site entre Lumière et Obscurité pour voir le thème du graphique reconfiguré.
Sensibilisation au thème
Chart.js se rend en HTML <canvas>, donc le CSS ne peut pas accéder aux barres, aux étiquettes d’axe ou aux lignes de grille — ce sont des pixels rasterisés. FluentUIChart Contourne cela en lisant les propriétés personnalisées du CSS résolues au moment du rendu et en poussant les valeurs dans les options de Chart.js comme color, scale.ticks.color, et scale.grid.color. Il s’abonne à ThemeService.ThemeChanged la palette et la réapplique chaque fois que le thème change.
Couleurs automatiques de jeux de données
Les jeux de données qui sortent BackgroundColor ou BorderColor sont nulls sont automatiquement remplis à partir d’une palette de séries dérivée de Fluent en commençant par la couleur d’accent actuelle. Les ensembles de données fournissant des couleurs explicites sont transmis sans modification.
Gestion des clics d’éléments
Abonnez-vous pour OnElementClick être informé lorsque l’utilisateur clique sur une barre (ou sur tout élément rendu). Le rappel reçoit un ChartClickEventArgs avec l’index du jeu de données, l’index des données, l’étiquette, la valeur, l’étiquette du jeu de données et l’instance originale IDataPoint . Sous-classe DataPoint pour associer un contexte défini par l’appelant (id d’enregistrement, région, catégorie, etc.) et faire correspondre un pattern à votre sous-classe dans le gestionnaire de clics pour le récupérer. Les clics sur l’arrière-plan du graphique sont ignorés.
Titre du classement
Réglez Title pour afficher un titre au-dessus du graphique. Le titre est rendu par Chart.js à l’intérieur de la toile et utilise la couleur du texte du thème actuel.
Graphiques empilés
Configurez Stacked="true" pour empiler les ensembles de données les uns sur les autres plutôt que côte à côte. Cela est utile pour les graphiques à barres et lignes avec plusieurs séries où le total sur toutes les séries a un sens (par exemple, revenu total = gagné + perdu).
Position de la légende
Réglez LegendPosition pour contrôler où apparaît la légende : "top" (par défaut), "bottom", "left", "right", ou "hidden" pour la cacher complètement.
AggregateDataverseChartDataSource
Utilisez-le AggregateDataverseChartDataSource pour alimenter un graphique depuis Dataverse sans écrire du FetchXML brut. Posez TableName, GroupByColumn, AggregateColumn, et Aggregate. En option, ajoutez un SeriesColumn pour multi-séries, un GroupByDateGrouping pour le bucketing de dates, un ViewId pour fusionner les conditions de filtre d’une vue sauvegardée, ou un FilterXml fragment pour les conditions en ligne.
Exemple du Dataverse
Revenus d’opportunités estimés par année, divisés par statut (gagnés vs perdus) et empilés — chargés depuis Dataverse via AggregateDataverseChartDataSource. Cliquez sur une barre pour voir l’année, le statut et les revenus.
Filtrage basé sur la vue
Passez ViewIds et DefaultViewId allez DataverseChart afficher un menu déroulant de sélection de vue au-dessus du tableau. Lorsque l’utilisateur change de vue, les conditions de filtre de la vue sélectionnée sont fusionnées dans la requête agrégée et le graphique se recharge. Le ViewId sur la source n’est pas directement défini — DataverseChart il le gère. La vue détermine quels enregistrements sont inclus ; La configuration agrégée détermine comment ils sont regroupés et résumés.
Exemple filtré par vue
Chiffre d’affaires estimé par mois avec un menu déroulant de sélection de vues. Passez d’une vue à l’autre pour voir le graphique se recharger avec différents critères de filtrage.
Regroupement d’entités liées
Définir GroupByLinkedEntity (ou SeriesLinkedEntity) pour regrouper ou diviser par une colonne sur une table apparentée. Le constructeur crée une <link-entity> jonction et place l’attribut groupby à l’intérieur. Prend en charge le nœudage illimité via ChartLinkedEntity.LinkedEntity les jointures multi-sauts.
La configuration ci-dessus génère le FetchXML suivant :
Exemple d’entité liée
Le revenu total estimé des opportunités regroupé par secteur du compte parent — la industrycode chronique reste sur la account table, rejointe via customerid.
Voir aussi