Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Diagramme

Plain trend line

Plain trend line: Ein minimalistisches Liniendiagramm mit einer einzelnen Serie mit einer glatten, unverzierten Kurve und ohne Punktmarkierungen, das so schlicht und lesbar gehalten ist, wie eine Trendlinie nur sein kann.

Plain trend line verwenden

Plain trend line verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
accentColorcolor#38BDF8Keine weitere Grenze in den Metadaten.
strokeWidthnumber2Von 1 bis 4; Schrittweite 0.5
showGridbooleantrueKeine weitere Grenze in den Metadaten.
animatebooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Plain trend line verfügbar?

Plain trend line ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Plain trend line?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Plain trend line erkennbar?

Der React-Quellcode von Plain trend line enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-live, onKeyDown, tabIndex); explizite Rollen (img); Tastenvergleiche (ArrowLeft, ArrowRight, End, Escape, Home). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Plain trend line reduzierte Bewegung?

Plain trend line liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: animate && !reduce ? 0.5 : 0. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Wiping multi series line von Fieldbook aus der Kategorie Diagramme.
1903Wiping multi series lineDiagrammeEin Liniendiagramm mit mehreren Serien, das beim ersten Anstrich einblendet, bei sich ändernden Daten zu einem neuen Bereich gleitet und über jede Serie hinweg eine einrastende Fadenkreuzanzeige anzeigt.
Standbild der UI-Komponente Series Switch Trend von Fieldbook aus der Kategorie Diagramme.
2292Series Switch TrendDiagrammeEine 90-Tage-Trendlinie mit insgesamt zwei Kacheln in der Kopfzeile; Wenn Sie eine Kachel auswählen, wird die Linie in diese Serie umgewandelt und der Strich an seinen Akzent angepasst.
Standbild der UI-Komponente Forecast tail line von Fieldbook aus der Kategorie Diagramme.
1859Forecast tail lineDiagrammeEine gestrichelte Fortsetzung, die eine Serie über ihren letzten wirklichen Punkt hinaus bis zum Horizont führt, sich ausdehnt und auf einer hohlen Markierung landet.
Standbild der UI-Komponente Gridline area chart von Fieldbook aus der Kategorie Diagramme.
2099Gridline area chartDiagrammeEin kartengerahmtes Flächendiagramm mit zwei überlappenden gefüllten Ebenen, Häkchen mit abgerundeten Achsen, einer schwachen Gitterlinie und einer Fußzeile, die den Trend angibt.
Standbild der UI-Komponente Named point line von Fieldbook aus der Kategorie Diagramme.
2291Named point lineDiagrammeEine Linie über fünf Kategorien, die jeden Kategorienamen über seinem Punkt anstelle einer Zahl druckt und den Wert der Hover-Anzeige überlässt.
Standbild der UI-Komponente Smooth Area Trend von Fieldbook aus der Kategorie Diagramme.
1888Smooth Area TrendDiagrammeEin Flächendiagramm mit einer einzigen Reihe mit einer sanft geschwungenen Oberkante, einer sanft getönten Füllung, schwachen horizontalen Gitterlinien und einer Anzeige, die dem Zeiger folgt.