Balkendiagramm
Rendere ein Balkendiagramm, indem du es auf der FluentUIChart Komponente einsetztType="bar". Übergebe eine Liste von Kategorielabels und ein oder mehrere ChartDataset Objekte, um die Balken zu definieren. FluentUIChart ist ein thema-bewusster Wrapper um die zugrundeliegende Chart Komponente, der auf Chart.js aufgebaut ist.
Beispiel für statische Daten
Ein Balkendiagramm mit drei ungefärbten Datensätzen – Farben werden aus der aktiven Fluent-Palette ausgefüllt. Klicken Sie auf eine beliebige Leiste, um die Event-Payload zu sehen, und schalten Sie das Seitenthema zwischen Licht und Dunkel um, um das Diagramm neu gestaltet zu sehen.
Themenbewusstsein
Chart.js rendert in HTML <canvas>, sodass CSS nicht in Balken, Achsenbeschriftungen oder Rasterlinien gelangen kann – es sind gerasterte Pixel. FluentUIChart Umgeht dies, indem man die aufgelösten benutzerdefinierten CSS-Eigenschaften zur Renderzeit liest und die Werte in die Chart.js Optionen colorals , scale.ticks.color, und scale.grid.colorschiebt. Es abonniert ThemeService.ThemeChanged die Palette und legt die Palette neu an, wann immer sich das Thema ändert.
Automatische Datensatzfarben
Datensätze, die verlassen BackgroundColor oder BorderColor null sind, werden automatisch aus einer von Fluent abgeleiteten Serienpalette ausgefüllt, beginnend mit der aktuellen Akzentfarbe. Datensätze, die explizite Farben liefern, werden unverändert durchgereicht.
Element-Klick-Behandlung
Abonnieren Sie OnElementClick , um benachrichtigt zu werden, wenn der Nutzer auf eine Leiste (oder ein beliebiges gerendertes Element) klickt. Der Callback erhält eine ChartClickEventArgs mit dem Datensatzindex, dem Datenindex, dem Label, dem Wert, dem Datensatzlabel und der ursprünglichen IDataPoint Instanz. Unterklasse DataPoint , um anruferdefinierten Kontext (Datensatz-ID, Region, Kategorie usw.) und Musterabgleich mit deiner Unterklasse im Click-Handler zu verbinden, um sie wiederherzustellen. Klicks auf den Diagramm-Hintergrund werden ignoriert.
Charttitel
Stellen Sie ein, Title dass eine Überschrift über der Tabelle angezeigt wird. Der Titel wird von Chart.js innerhalb der Leinwand gerendert und verwendet die Textfarbe des aktuellen Themas.
Gestapelte Charts
Setzen Sie die Datensätze so ein, Stacked="true" dass sie übereinander stapeln, anstatt nebeneinander. Dies ist nützlich für Balkendiagramme und Liniendiagramme mit mehreren Serien, bei denen die Gesamtsumme über alle Reihen hinweg sinnvoll ist (z. B. Gesamtumsatz = gewonnen + verloren).
Legendenposition
Stellen Sie ein, LegendPosition um zu steuern, wo die Legende erscheint: "top" (Standard), "bottom", , "left""right", , oder "hidden" um sie vollständig auszublenden.
AggregateDataverseChartDataSource
Ich nutze AggregateDataverseChartDataSource es, um ein Diagramm aus Dataverse einzuspeisen, ohne rohes FetchXML zu schreiben. Setze TableName, GroupByColumn, AggregateColumn, und Aggregate. Optional füge ein für SeriesColumn Mehrserien, ein für GroupByDateGrouping Datums-Bucketing, ein Zusammenführen ViewId der Filterbedingungen einer gespeicherten Ansicht oder ein FilterXml Fragment für Inline-Bedingungen hinzu.
Dataverse-Beispiel
Geschätzte Chancenumsätze nach Jahr, aufgeteilt nach Status (Gewonnen vs. Verloren) und gestapelt – aus Dataverse AggregateDataverseChartDataSourceüber geladen. Klicken Sie auf eine Leiste, um das Jahr, den Status und den Umsatz zu sehen.
Ansichtsbasierte Filterung
Weiter, ViewIds DefaultViewId DataverseChart um ein Ansichts-Dropdown-Menü über der Grafik anzuzeigen. Wenn der Benutzer die Ansicht wechselt, werden die Filterbedingungen der ausgewählten Ansicht in die aggregierte Abfrage eingegliedert und das Diagramm wird neu geladen. Die ViewId Quelle ist nicht direkt eingestellt – DataverseChart sie verwaltet sie. Die Ansicht bestimmt , welche Datensätze enthalten sind; Die aggregierte Konfiguration bestimmt, wie sie gruppiert und zusammengefasst werden.
Ansichtsgefiltertes Beispiel
Geschätzter Umsatz nach Monat mit einem Aufrufauswahl-Dropdown. Wechsle zwischen den Ansichten, um zu sehen, wie das Diagramm mit verschiedenen Filterkriterien neu geladen wird.
Verknüpfte Entitätsgruppierung
Setze GroupByLinkedEntity (oder SeriesLinkedEntity) auf Gruppierung oder Spaltung durch eine Spalte in einer zugehörigen Tabelle. Der Builder erstellt einen <link-entity> Join und platziert das Attribut groupby darin. Unterstützt unbegrenztes Nesting ChartLinkedEntity.LinkedEntity für Multi-Hop-Joins.
Die obige Konfiguration erzeugt folgendes FetchXML:
Beispiel für eine verknüpfte Entität
Gesamtgeschätzte Opportunity Revenue, gruppiert nach der Branche des Mutterkontos – die Spalte industrycode befindet sich auf der account Tabelle, verbunden über customerid.
Siehe auch
Chart API Reference — vollständige Dokumentation für alle Chartklassen, Enums und Datenquellen.