Diagramme

Spend breakdown chart

Dienstausgaben in einem horizontalen Diagramm mit gemeinsamer Skala und Periodenvergleich prüfen.

Spend breakdown chart

Inspect service spending with an accessible horizontal bar chart and period comparison.

Spend period

USD per billing cycle

$624.00

$134.40

$84.00

Compute

Compute runs build and release workers. September spend increased by $94.00.

Spend breakdown chart verwenden

Dienstausgaben in einem horizontalen Diagramm mit gemeinsamer Skala und Periodenvergleich prüfen.

Dienstausgaben in einem horizontalen Diagramm mit gemeinsamer Skala und Periodenvergleich prüfen. Für kontrolliertes React value und onChange übergeben; onAction erhält Aktion und Folgezustand. defaultValue setzt einen lokalen Entwurf.

Storage auswählen, die Erklärung lesen und für den Betragsvergleich zu August wechseln. Dieses Beispiel aktualisiert nur einen lokalen Entwurf.

Das Beispiel enthält drei feste Kategorien mit gemeinsamer Skala bis 700 USD. Die Werte bei Anpassung ersetzen.

Eigenschaften: accent, status

Wie erhält die Anwendung Änderungen?

Für kontrolliertes React value und onChange übergeben; onAction erhält Aktion und Folgezustand. defaultValue setzt einen lokalen Entwurf.

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

1840Activity cell heatmapDiagrammeEin Kalenderraster aus kleinen getönten Quadraten, das in einer diagonalen Welle verläuft und es einem ebenen Streifen ermöglicht, jeweils eine Intensität zu isolieren.

2104Animated Time AxisDiagrammeEine Reihe von Datumsbeschriftungen unter einem Liniendiagramm, das automatisch eine gleichmäßig verteilte Teilmenge auswählt, um Überfüllung zu vermeiden, und Beschriftungen in der Nähe des schwebenden Punkts ausblendet.

2097Animated Value AxisDiagrammeEine Spalte mit Wertebeschriftungen neben einem Diagramm, die große Zahlen abkürzt und sanft zu neuen Positionen gleitet, wenn sich der Datenbereich des Diagramms ändert.

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.

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.

2287Category dot lineDiagrammeEine einzelne glatte Kurve über fünf benannte Kategorien, wobei jede Punktmarkierung anhand einer farblich gedrehten Akzentrampe gefärbt wird, sodass die Markierungen gleichzeitig als Legende dienen.