> 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 Visualisiere Tabellendaten auf einer Seite mit Balken-, Linien-, Torten- und Fortschrittsdiagrammen. 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 Hinzufügen öffnen** Öffne im **Einstellungsbereich** den Tab **Hinzufügen**. {% endstep %} {% step %} **Diagrammtyp wählen** Ziehe die gewünschte Komponente **Balkendiagramm**, **Liniendiagramm**, **Tortendiagramm** oder **Fortschrittsdiagramm** aus **Diagramme** an die gewünschte Stelle auf der Seite. {% endstep %} {% step %} **Komponente benennen** Die **Bezeichnung** und der **Interne Name** werden automatisch erstellt. Du kannst sie unter **Einstellungen** bei Bedarf ändern. {% endstep %} {% step %} **Diagramm konfigurieren** Unter **Quelle**: * Lasse **Konstant** als Datenpunktoption ausgewählt. * Wähle die Quell-**Tabelle**. * Bestimme 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 **Konstant**, um sie mit Steuerelementen zu konfigurieren, oder **Logik**, um ein Ninox Skript zu verwenden.\ \ Wenn **Datenpunkt** auf **Konstant** 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 **Logik** gesetzt ist: * Füge in **Logik** das Ninox Skript für den Datenabruf hinzu.\ In diesem Fall erwartet Ninox die Werte und optionalen Layout-Einstellungen als Schlüssel-Wert-Paare im JSON-Stil in geschweiften Klammern `{...}`.\ \ Diagramme benötigen ein Array von Kategorieobjekten. Jedes Objekt benötigt: * `label` für den Namen der Reihe und die Kategorie auf der X-Achse. * Eine beliebige Anzahl zusätzlicher frei benannter `keys`. Diese können numerische Felder oder Gruppen mit Aggregation sein. Jeder `key` steht für eine Datenreihe, etwa `count` oder `avg`. * Derselbe `key`-Name in mehreren Zeilen definiert eine Reihe. \ Ein Beispiel dafür findest du im nächsten Absatz. 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" %} Nutze für **Logik** unter **Datenpunkt** Ninox AI im [Funktionen des Logik-Editors](/ninox-scripting/de/automate-your-workflows/explore-core-scripting-elements/logic-editor-features.md), um ein Skript zu erstellen oder ein vorhandenes Skript erklären zu lassen. {% endhint %} #### **Schauen wir uns ein Beispiel an:** Wenn du den Datenabruf über **Logik** ausführst, strukturiere das Skript so: {% code lineNumbers="true" %} ``` // Alle Pflanzen auswählen, die höher als 20 cm sind let hohePflanzen := select pflanzen where hoehe > 20; // Für jede Pflanze ein Datenobjekt mit Bezeichnung, Höhe und Breite erstellen for p in hohePflanzen do { label: p.pflanzenname, Höhe: p.hoehe, Breite: p.breite } end ``` {% endcode %} Nutze Ninox AI mit folgendem Prompt, um das Skript zu erstellen:\ "Erstelle ein Script für eine Balkendiagramm-Komponente mit allen Pflanzen, die höher als 20 cm sind." ## 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 **Innen** oder **Außen**. * **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 **Innen** oder **Außen**. 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 **Außen**, **Innen** oder **Mitte**. * **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 rechnungen where erstellt_am > today() - 90).gesamt)` * **Wert** legt den aktuellen Fortschrittswert fest.\ Beispiel:\ `sum((select rechnungen where erstellt_am > today() - 30).gesamt)` {% 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.