Classements

Le module de graphographie PowerPortalsPro propose des graphiques interactifs et thématiques construits sur Chart.js. Les graphiques s’adaptent automatiquement au thème actif de Fluent UI (mode clair/sombre, couleurs d’accent), chargent les données directement depuis Dataverse via des requêtes FetchXML agrégées, et supportent les événements de clic permettant aux utilisateurs d’approfondir les données sous-jacentes.

Types de cartes

Chaque type de graphique est rendu par le FluentUIChart composant (ou le DataverseChart wrapper de commodité) avec le Type paramètre réglé à la valeur d’enum désirée ChartType .

  • Graphique à barres — barres verticales pour comparer les catégories. Prend en charge le mode empilé et le multi-série.
  • Graphique des lignes — relient des points pour les tendances au fil du temps. Permet de comparer une année sur l’autre.
  • Graphique circulaire — tranches proportionnelles d’une mesure unique à travers les catégories.
  • Tableau des beignets — comme une tarte avec un centre creux pour un rendu plus propre.
  • Carte radar — comparaison multidimensionnelle sur une grille radiale.
  • Carte des aires polaires — comme une tarte, mais le rayon de chaque segment est proportionnel à sa valeur.
  • Tableau de l’entonnoir — visualiser la réduction progressive à travers les étapes, se rétrécissant de haut en bas.

Caractéristiques clés

Tous les types de cartes partagent un ensemble commun de capacités :

  • Thématique — lit les jetons de conception Fluent UI pour le texte, les lignes de grille et les couleurs d’accent ; Rethématisation automatique lorsque l’utilisateur bascule en mode clair/foncé.
  • Sources de données Dataverse — données de tableau de charge provenant de Dataverse avec un seul LoadAsync appel. Aucun FetchXML manuel n’est nécessaire pour les scénarios courants.
  • Requêtes agrégées — Sum, Count, CountColumn, Avg, Min, Max via AggregateDataverseChartDataSource.
  • Cliquez sur interactivité — OnElementClick déclenche un ChartClickEventArgs avec l’index du jeu de données, l’index des données, l’étiquette, la valeur et l’original IDataPoint pour la correspondance de motifs.
  • Répartition par date — Jour, Semaine, Mois, Trimestre, Année, et des groupes combinés comme MoisAndAnnée ou TrimestreAndAnnée.
  • Année sur année — SeriesDateGrouping divise la même colonne de date en plusieurs séries selon un intervalle de temps différent.
  • Regroupement d’entités liées — groupe ou division par une colonne sur une table liée via GroupByLinkedEntity / SeriesLinkedEntity avec un imbrication illimitée.
  • Filtrage basé sur les vues — passe ViewIds et DefaultViewId continue DataverseChart pour afficher un menu déroulant permettant aux utilisateurs de passer d’une vue Dataverse sauvegardée. Les conditions de filtre de la vue sélectionnée sont automatiquement intégrées dans la requête agrégée.
  • Graphiques empilés — Stacked="true" empilent des ensembles de données les uns sur les autres.
  • Titre et légende — Title pour un titre au-dessus du graphique ; LegendPosition pour haut/bas/gauche/droite/caché.
  • Formatage de valeur — YAxisPrefix/YAxisSuffix et XAxisPrefix/XAxisSuffix pour la monnaie, les pourcentages et les labels personnalisés.
  • Exportez en image — téléchargez le graphique en PNG d’un seul clic.
  • Bouton rafraîchissement — rechargez les données de Dataverse sans quitter la page.
  • Bordure thématique — bordure arrondie optionnelle utilisant des jetons de design Fluent via ShowBorder.

Sources de données

Trois classes de sources de données couvrent le spectre allant du contrôle complet à la configuration zéro :

  • DataverseChartDataSource — accepte le FetchXML brut avec des correspondances de colonnes explicites. Flexibilité maximale pour les requêtes complexes.
  • AggregateDataverseChartDataSource — propriétés d’ensemble comme TableName, GroupByColumn, AggregateColumn, et Aggregate. La source de données construit automatiquement le FetchXML.
  • ViewDataverseChartDataSource — résout FetchXML à partir d’une vue Dataverse sauvegardée. Définir LabelColumn et ValueColumn indiquer quelles colonnes correspondent aux étiquettes et aux valeurs.

Commencer

La façon la plus rapide d’ajouter un graphique est la DataverseChart composante de commodité avec un AggregateDataverseChartDataSourcefichier . Consultez la démonstration du graphique à barres pour une visite complète, ou la référence API pour la documentation sur chaque classe et propriété.