Charts

Das PowerPortalsPro-Charting-Modul bietet interaktive, themenorientierte Diagramme, die auf Chart.js basieren. Diagramme passen sich automatisch an das aktive Fluent-UI-Thema an (Hell/Dunkel-Modus, Akzentfarben), laden Daten direkt aus Dataverse über aggregierte FetchXML-Abfragen und unterstützen Klickereignisse, die es den Nutzern ermöglichen, in die zugrunde liegenden Daten einzutauchen.

Charttypen

Jeder Diagrammtyp wird von der Komponente FluentUIChart (oder dem DataverseChart Convenience Wrapper) dargestellt, wobei der Type Parameter auf den gewünschten ChartType Enum-Wert gesetzt ist.

  • Balkendiagramm — vertikale Balken zum Vergleich von Kategorien. Unterstützt gestapelten Modus und Multiserien.
  • Liniendiagramm — verbundene Punkte für Trends im Zeitverlauf. Unterstützt Jahresvergleiche.
  • Tortendiagramm — proportionale Schnitte eines einzelnen Maßes über Kategorien hinweg.
  • Donut-Tabelle – genau wie Kuchen mit hohler Mitte für ein saubereres Aussehen.
  • Radarkarte — mehrdimensionaler Vergleich auf einem radialen Gitter.
  • Polarflächenkarte – wie Kuchen, aber der Radius jedes Segments ist proportional zu seinem Wert.
  • Funnel-Diagramm — Visualisieren Sie eine progressive Reduktion durch Stufen, die von oben nach unten verengt.

Hauptmerkmale

Alle Diagrammtypen teilen einen gemeinsamen Satz von Fähigkeiten:

  • Themenbewusst – liest Fluent UI Design-Tokens für Text, Rasterlinien und Akzentfarben; Wird automatisch neu gestaltet, wenn der Benutzer den Hell-/Dunkelmodus umschaltet.
  • Dataverse-Datenquellen – laden Sie Diagrammdaten aus Dataverse mit einem einzigen LoadAsync Anruf. Für gängige Szenarien ist kein manuelles FetchXML erforderlich.
  • Aggregierte Abfragen — Sum, Count, CountColumn, Avg, Min, Max via AggregateDataverseChartDataSource.
  • Klick auf Interaktivität – OnElementClick aktiviert einen ChartClickEventArgs mit Datensatzindex, Datenindex, Label, Wert und dem Original IDataPoint zur Mustererkennung.
  • Datums-Einteilung – Tag, Woche, Monat, Quartal, Jahr und kombinierte Gruppierungen wie Monat-und-Jahr oder Quartal-und-Jahr.
  • Year-to-year – SeriesDateGrouping unterteilt dieselbe Datumsspalte in mehrere Reihen mit einem anderen Zeitintervall.
  • Verknüpfte Entitätsgruppierung — gruppieren oder durch eine Spalte in einer zugehörigen Tabelle GroupByLinkedEntity über / SeriesLinkedEntity mit unbegrenztem Verschachteln aufteilen.
  • Ansichtsbasierte Filterung – übergeben ViewIds und DefaultViewId weiter DataverseChart , um ein Dropdown-Menü anzuzeigen, mit dem Nutzer zwischen gespeicherten Dataverse-Ansichten wechseln können. Die Filterbedingungen der ausgewählten Ansicht werden automatisch in die aggregierte Abfrage eingegliedert.
  • Gestapelte Diagramme – Stacked="true" stapeln Datensätze übereinander.
  • Titel & Legende — Title für eine Überschrift über der Grafik; LegendPosition für oben/unten/links/rechts/versteckt.
  • Wertformatierung — YAxisPrefix/ undYAxisSuffix XAxisPrefix/XAxisSuffix für Währung, Prozentsätze und benutzerdefinierte Labels.
  • Als Bild exportieren – laden Sie das Diagramm mit einem Klick als PNG herunter.
  • Aktualisieren-Schaltfläche – Daten aus Dataverse neu laden, ohne die Seite zu verlassen.
  • Thematischer Rand — optional abgerundeter Rand mit Fluent-Design-Tokens über ShowBorder.

Datenquellen

Drei Datenquellenklassen decken das Spektrum von voller Kontrolle bis zur Nullkonfiguration ab:

  • DataverseChartDataSource — akzeptiert rohes FetchXML mit expliziten Spaltenabbildungen. Maximale Flexibilität für komplexe Abfragen.
  • AggregateDataverseChartDataSource — setze Eigenschaften wie TableName, GroupByColumn, , AggregateColumnund Aggregate. Die Datenquelle erstellt das FetchXML automatisch.
  • ViewDataverseChartDataSource — löst FetchXML aus einer gespeicherten Dataverse-Ansicht auf. Setze LabelColumn und ValueColumn um, um anzuzeigen, welche Spalten auf Labels und Werte abgebildet sind.

Anfang

Der schnellste Weg, ein Diagramm hinzuzufügen, ist die DataverseChart Bequemlichkeitskomponente mit einem AggregateDataverseChartDataSource. Siehe die Balkendiagramm-Demo für eine vollständige Anleitung oder die API-Referenz für Dokumentationen zu jeder Klasse und Eigenschaft.