Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Diagramme

Donut with total

Donut with total: Ein Donut-Diagramm, das die laufende Summe in ein eigenes Loch einfügt und diese Anzeige auf das Segment austauscht, auf dem sich der Mauszeiger befindet oder der fokussiert ist.

Donut with total verwenden

Donut with total 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
accentcolor#9BE15DKeine weitere Grenze in den Metadaten.
captiontextSessionsBis zu 24 Zeichen
holeRationumber0.58Von 0.35 bis 0.75; Schrittweite 0.02
hueRangenumber90Von 20 bis 180; Schrittweite 5
countUpbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Donut with total verfügbar?

Donut with total 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 Donut with total?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Donut with total erkennbar?

Der React-Quellcode von Donut with total enthält: Attribute und Ereignisbehandler (aria-atomic, aria-hidden, aria-label, aria-live, onKeyDown, tabIndex); explizite Rollen (button, group); Tastenvergleiche (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Escape). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Donut with total reduzierte Bewegung?

Donut with total liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 Donut share chart von Fieldbook aus der Kategorie Diagramme.
2336Donut share chartDiagrammeEin Donut aus fünf Scheiben mit einer hohlen Mitte und haarfeinen Lücken, der sich auf der Halterung öffnet und diejenige Scheibe anhebt, über der sich der Zeiger befindet.
Standbild der UI-Komponente Raised Slice Donut von Fieldbook aus der Kategorie Diagramme.
2408Raised Slice DonutDiagrammeEin Donut, bei dem ein Slice dauerhaft über den Ring angehoben wird, indem sein Außenradius erweitert wird, und die Erhöhung beim Schweben zu jedem anderen Slice gleitet.
Standbild der UI-Komponente Engraved label pie von Fieldbook aus der Kategorie Diagramme.
2348Engraved label pieDiagrammeEin solides Kreisdiagramm, das jeden Kategorienamen in seinem eigenen Segment in einer invertierten Farbe einfügt, sodass die Aufschlüsselung ohne äußere Beschriftungen oder Führungslinien angezeigt wird.
Standbild der UI-Komponente Leader line pie von Fieldbook aus der Kategorie Diagramme.
2377Leader line pieDiagrammeEin solides Kreisdiagramm, dessen Werte außerhalb des Kreises liegen und jeweils durch eine aus zwei Segmenten bestehende Führungslinie an ihren Ausschnitt gebunden sind.
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 Outside Value Pie von Fieldbook aus der Kategorie Diagramme.
2395Outside Value PieDiagrammeEin solides Kreisdiagramm mit bloßen Zahlen, die direkt außerhalb jedes Segments schweben und so positioniert sind, dass jede Beschriftung von der Mitte nach außen zeigt, ohne Verbindungslinien.