> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/chart-components.md). # Diagramm-Komponenten Nutze Diagramm-Komponenten auf einer Seite, um Tabellendaten schnell visuell zusammenzufassen. Wähle den Diagrammtyp nach der Frage, die du beantworten möchtest: * **Balkendiagramm** zum Vergleichen von Werten zwischen Kategorien * **Liniendiagramm** zum Anzeigen von Veränderungen im Zeitverlauf * **Tortendiagramm** zum Vergleichen von Anteilen * **Fortschrittsdiagramm** zum Verfolgen des Fortschritts zu einem Ziel Bevor du eine Diagramm-Komponente hinzufügst, stelle sicher, dass du Folgendes hast: * eine klare Frage, die das Diagramm beantworten soll * numerische Werte und Datensätze, die gruppiert werden können * Felder zum Filtern von Datensätzen, wenn das Diagramm nur bestimmte Datensätze zeigen soll ## Diagramm-Komponente hinzufügen {% stepper %} {% step %} #### Tab **Add** öffnen Öffne im Bereich **Settings** den Tab **Add**. {% endstep %} {% step %} #### Diagrammtyp wählen Ziehe unter **Diagramme** **Balkendiagramm**, **Liniendiagramm**, **Tortendiagramm** oder **Fortschrittsdiagramm** an die gewünschte Stelle auf der Seite. {% endstep %} {% step %} #### Diagramm konfigurieren Wähle in den **Settings** der Komponente die Quelle. Wähle die Feldwerte oder Ausdrücke, die das Diagramm anzeigen soll. {% endstep %} {% step %} #### Ergebnis prüfen Prüfe, ob das Diagramm die Frage beantwortet, für die die Seite gedacht ist.\ Ziehe die Komponente, um sie auf der Seite zu verschieben. Nutze die Anfasser, um ihre Größe anzupassen. {% endstep %} {% endstepper %} ## Gemeinsame Einstellungen für Diagramm-Komponenten In den **Einstellungen** haben alle Diagramm-Komponenten diese Optionen gemeinsam: * **Bezeichnung** für den Titel der Komponente * **Interner Name** wird automatisch ausgefüllt. Ändere ihn nur bei Bedarf und mit Bedacht. Beim Skripten verwendest du den **Internen Namen**, nicht die **Bezeichnung**. Unter **Quelle** konfigurierst du die Datenbeschaffung (gilt nicht für **Fortschrittsdiagramme)**: * **Datenpunkt** stellt die Datenbeschaffung ein. Verwende **Manuell**, um sie mit Steuerelementen zu konfigurieren, oder **Bedingt**, um ein Ninox Skript zu verwenden.\ \ Wenn **Datenpunkt** auf **Manuell** gesetzt ist: * **Typ** wählt **Balkendiagramm**, **Liniendiagramm** oder **Tortendiagramm**. * **Tabelle** bestimmt die Quelltabelle. * **Filter** schließt nur die benötigten Daten ein.\ \ Wenn **Datenpunkt** auf **Bedingt** gesetzt ist: * **Datenpunktlogik** fügt das Ninox Skript hinzu, das die Daten abruft.\ In diesem Fall erwartet Ninox **Schlüssel-Wert-Paare** in geschweiften Klammern **{...}.** Unter **Sichtbarkeit**: * **Sichtbar** zeigt die Komponente auf der Seite. * **Versteckt** blendet die Komponente auf der Seite aus. * **Bedingt** definiert eine **Sichtbarkeitsbedingung**, die steuert, wann die Komponente angezeigt oder ausgeblendet wird. Dies betrifft nur die Anzeige auf der Seite. Datensätze und Berechtigungen bleiben unverändert. {% hint style="info" %} Verwende für die **Logik** unter **Datenpunkt** am besten die Ninox AI im [Logik-Editor](/ninox-scripting/de/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md). Sie unterstütz dich bei der Erstelling eines Skripts für das benötigte Ergebnis oder erklärt dir ein fertiges Skript. {% endhint %} **Schauen wir uns ein Beispiel an:** {% code lineNumbers="true" %} ``` for c in (select kunden where count(rechnungen) > 0) do { label: c.name, Gesamtsumme: sum(c.rechnungen.rechnungsbetrag_gesamt) } end ``` {% endcode %} Ninox AI erstellt dir ein solches Skript, wenn du folgenden Prompt eingibst:\ "Bitte zeige mir alle Kunden und den Gesamtbetrag aller ihrer Rechnungen an." ## Diagrammspezifische Einstellungen ### Einstellungen für Balkendiagramme Unter **Quelle** richtest du die Diagrammdaten ein, wenn **Datenpunkt** auf **Manuell** gesetzt ist: * **X-Achse** wählt, wie Ninox die Datensätze gruppiert. * **Y-Achse** fügt ein oder mehrere numerische Datenfelder hinzu.\ Wähle **+ Datensatz hinzufügen**, um ein Feld mit Aggregation und Farbe auszuwählen.\ Füge weitere Felder hinzu, um Werte im selben Diagramm zu vergleichen.\ Wenn du hier kein Feld auswählst, verwendet Ninox das Feld **X-Achse** und **Anzahl** als Standardaggregation. Unter **Anzeige** konfigurierst du das Erscheinungsbild: * **Bezeichnungsposition** zeigt Bezeichnungen **Inside** oder **Outside**. * **Balkenausrichtung** zeigt Balken **Vertikal** oder **Horizontal**. Unter **Verhalten** konfigurierst du das Verhalten des Diagramms: * **Gestapelte Balken** fasst mehrere Datensätze in einem Balken pro Gruppe zusammen. * **Titel anzeigen** zeigt oder verbirgt die Bezeichnung des Diagramms. * **Beschriftungen anzeigen** zeigt oder verbirgt Beschriftungen im Diagramm. * **Legende anzeigen** zeigt oder verbirgt die Legende. * **Tooltips anzeigen** zeigt Werte, wenn Nutzer auf Diagrammelemente zeigen. * **Datentabelle anzeigen** zeigt oder verbirgt die Diagrammwerte in einer Tabelle unter dem Diagramm. ### Einstellungen für Liniendiagramme Unter **Quelle** richtest du die Diagrammdaten ein, wenn **Datenpunkt** auf **Manuell** gesetzt ist: * **X-Achse** wählt, wie Ninox die Datensätze gruppiert. * **Y-Achse** fügt ein oder mehrere numerische Datenfelder hinzu.\ Wähle **+ Datensatz hinzufügen**, um ein Feld mit Aggregation und Farbe auszuwählen.\ Füge weitere Felder hinzu, um Werte im selben Diagramm zu vergleichen.\ Wenn du hier kein Feld auswählst, verwendet Ninox das Feld **X-Achse** und **Anzahl** als Standardaggregation. Unter **Anzeige** konfigurierst du das Erscheinungsbild: * **Bezeichnungsposition** zeigt Bezeichnungen **Inside** oder **Outside**. Unter **Verhalten** konfigurierst du das Verhalten des Diagramms: * **Glatte Linien** verbinden Werte mit gekrümmten Linien. * **Datenpunkte anzeigen** zeigt oder verbirgt Markierungen auf der Linie. * **Titel anzeigen** zeigt oder verbirgt die Bezeichnung des Diagramms. * **Beschriftungen anzeigen** zeigt oder verbirgt Beschriftungen im Diagramm. * **Legende anzeigen** zeigt oder verbirgt die Legende. * **Tooltips anzeigen** zeigt Werte, wenn Nutzer auf Diagrammelemente zeigen. * **Datentabelle anzeigen** zeigt oder verbirgt die Diagrammwerte in einer Tabelle unter dem Diagramm. ### Einstellungen für Tortendiagramme Unter **Quelle** richtest du die Diagrammdaten ein, wenn **Datenpunkt** auf **Manuell** gesetzt ist: * **Kategorie** wählt ein Feld, nach dem Ninox das Tortendiagramm in Segmente aufteilt. * **Datenquelle** wählt Feld und Aggregation für die Werte.\ Verfügbare Aggregationen sind **Summe**, **Durchschnitt**, **Median**, **Minimum**, **Maximum** und **Anzahl**.\ Nutze **Keine**, wenn du ein Feld nicht aggregieren möchtest. Unter **Anzeige** konfigurierst du das Erscheinungsbild: * **Bezeichnungsposition** zeigt Bezeichnungen **Outside**, **Inside** oder **Center**. * **Stil** wählt **Standard**, **Abgerundete Ecken**, **Halbkreis** oder **Kreis mit Abstandswinkel**. Unter **Verhalten** konfigurierst du das Verhalten des Diagramms: * **Donut** zeigt das Diagramm als Donut. * **Titel anzeigen** zeigt oder verbirgt die Bezeichnung des Diagramms. * **Beschriftungen anzeigen** zeigt oder verbirgt Beschriftungen im Diagramm. * **Legende anzeigen** zeigt oder verbirgt die Legende. * **Tooltips anzeigen** zeigt Werte, wenn Nutzer auf Diagrammelemente zeigen. * **Datentabelle anzeigen** zeigt oder verbirgt die Diagrammwerte in einer Tabelle unter dem Diagramm. ### Einstellungen für Fortschrittsdiagramme Unter **Anzeige** konfigurierst du das Erscheinungsbild: * **Farbe** wählt eine feste oder dynamische Farbe für den Fortschrittsring. Unter **Verhalten** konfigurierst du das Verhalten des Diagramms: * **Gesamt** legt den vollständigen Zielwert fest.\ Beispiel:\ `sum((select invoices where creation_date > today() - 90).gross_total)` * **Wert** legt den aktuellen Fortschrittswert fest.\ Beispiel:\ `sum((select invoices where creation_date > today() - 30).gross_total)` {% hint style="info" %} Um eine Komponente zu entfernen, wähle sie aus und klicke im blauen Menü darüber auf :trash-can: **Komponente löschen**. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/chart-components.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.