Diagramme

Series Switch Trend

Series Switch Trend: Eine 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.

Daily trendLast 90 days

Apr 2Apr 9Apr 16Apr 23Apr 30May 7May 14May 21May 28Jun 4Jun 11Jun 18Jun 25

Series Switch Trend verwenden

Series Switch Trend verwendet das Vorschauformat „breit“ 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`primaryColor`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`secondaryColor`	`color`	`#FF6A1F`	Keine weitere Grenze in den Metadaten.
`days`	`number`	`90`	Von 30 bis 120; Schrittweite 10
`strokeWidth`	`number`	`2`	Von 1 bis 4; Schrittweite 0.5
`showGrid`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Series Switch Trend verfügbar?

Series Switch Trend 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 Series Switch Trend?

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

Welche Details zur Barrierefreiheit sind in Series Switch Trend erkennbar?

Der React-Quellcode von Series Switch Trend enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-live, aria-pressed, 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 Series Switch Trend reduzierte Bewegung?

Series Switch Trend liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). 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 Plain trend line von Fieldbook aus der Kategorie Diagramme.

2288Plain trend lineDiagrammeEin 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.

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 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 Metric switch bar chart von Fieldbook aus der Kategorie Diagramme.

2280Metric switch bar chartDiagrammeEin dichtes tägliches Balkendiagramm mit zwei metrischen Kacheln in der Kopfzeile; Wenn Sie auf eine Kachel klicken, werden die Balken in diese Metrik umgewandelt.

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.