Diagramme

Engraved label pie

Engraved label pie: Ein 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.

Cloud spend by service

Monthly infrastructure cost, last billing cycle

5 services

$41,400

total monthly spend

Totals reconcile with the invoice issued on the 1st.

Shares recompute live as service spend shifts.

Engraved label pie verwenden

Engraved label pie 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`hueRange`	`number`	`90`	Von 20 bis 180; Schrittweite 5
`labelInset`	`number`	`0.66`	Von 0.4 bis 0.9; Schrittweite 0.02
`gap`	`number`	`1`	Von 0 bis 6; Schrittweite 0.5
`showReadout`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Engraved label pie verfügbar?

Engraved label pie 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 Engraved label pie?

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

Welche Details zur Barrierefreiheit sind in Engraved label pie erkennbar?

Der React-Quellcode von Engraved label pie enthält: Attribute und Ereignisbehandler (aria-atomic, aria-hidden, aria-label, aria-live, onKeyDown, tabIndex); explizite Rollen (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 Engraved label pie reduzierte Bewegung?

Engraved label pie liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: push: reduce ? 0 : isActive ? PUSH_PX : 0; reduce ? true : false. 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 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 Seamless share pie von Fieldbook aus der Kategorie Diagramme.

2420Seamless share pieDiagrammeEine feste Torte, deren Scheiben Kante an Kante miteinander verbunden sind und zwischen denen keine Lücken oder Striche vorhanden sind. Das Schweben ist also das Einzige, was verrät, wo ein Teil endet und der nächste beginnt.

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 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.

Standbild der UI-Komponente Area chart lite von Fieldbook aus der Kategorie Diagramme.

1525Area chart liteDiagrammeEin reaktionsfähiges SVG-Flächendiagramm mit runden Achsenstrichen, einer Verlaufsfüllung, einem Fadenkreuz, das das Muster unter dem Zeiger liest, und einem Wischtuch zum Zeichnen.

Standbild der UI-Komponente Candle Price Chart von Fieldbook aus der Kategorie Diagramme.

2086Candle Price ChartDiagrammeEin OHLC-Kerzendiagramm mit farbigen Auf- und Abwärtskerzen, einem Docht pro Periode und einem Hover-Tooltip, der den Eröffnungs-, Höchst-, Tiefst- und Schlusskurs anzeigt.