# Fortschrittskreis-Diagramm Erstellen Sie schöne kreisförmige Fortschrittsindikatoren mit Animationen, perfekt für die Anzeige von Prozentsätzen, Fertigstellungsraten und Fortschrittsmetriken > Kanonische Seite: https://elysiatools.com/de/tools/progress-ring-chart - **Kategorie:** Data Visualization - **Schlagwörter:** Fortschrittskreis, kreisförmiger Fortschritt, Prozentsatz, Donut-Diagramm, Fortschrittsindikator, Fertigstellungsrate, kreisförmige Messung ## Überblick Erstellen Sie mit unserem Fortschrittskreis-Diagramm-Tool ansprechende, animierte Visualisierungen für Ihre Daten. Ob für Projektfortschritte, Zielerreichungen oder Fertigstellungsraten – das Tool wandelt einfache Zahlenwerte in professionelle, kreisförmige Indikatoren um, die sich nahtlos in Präsentationen oder Dashboards einfügen. ## Eingaben - **Fortschrittsdaten** (textarea): Fortschrittswerte (0-100). Unterstützt JSON-Array mit Labels, einfache Label:Wert-Paare oder nur Werte - **Diagrammtitel** (text): Titel, der über dem Diagramm angezeigt wird - **Ringgröße** (number): Größe jedes Fortschrittsrings in Pixeln - **Ringdicke** (number): Dicke des Fortschrittsring-Strichs - **Startwinkel** (number): Startwinkel in Grad (-90 = oben, 0 = rechts, 90 = unten, 180 = links) - **Farbschema** (select): Farbschema auswählen - **Benutzerdefinierte Farben** (text): Benutzerdefinierte Farben für Fortschrittsringe (hex-Farben durch Kommas getrennt) - **Animationsdauer** (number): Dauer der Fortschrittsanimation in Millisekunden - **Hintergrundfarbe** (color): Hintergrundfarbe für den Diagrammcontainer - **Prozentsatz anzeigen** (checkbox): Prozentwert in der Mitte jedes Rings anzeigen - **Beschriftung anzeigen** (checkbox): Beschriftung unter jedem Fortschrittsring anzeigen - **Animiert** (checkbox): Fortschrittsringe beim Laden animieren ## Wann verwenden - Wenn Sie den Status von Projekten oder Aufgaben visuell und kompakt darstellen möchten. - Wenn Sie eine übersichtliche Alternative zu klassischen Balkendiagrammen für Prozentwerte suchen. - Wenn Sie animierte Elemente benötigen, um die Aufmerksamkeit auf wichtige Leistungskennzahlen zu lenken. ## Funktionsweise - Geben Sie Ihre Fortschrittswerte (0-100) als JSON-Array, Liste oder Einzelwerte in das Eingabefeld ein. - Passen Sie das Design durch Optionen wie Ringgröße, Dicke und Farbschemata individuell an. - Wählen Sie zusätzliche Einstellungen wie die Anzeige von Prozentzahlen oder Beschriftungen. - Generieren Sie das Diagramm und nutzen Sie die animierte Vorschau für Ihre Zwecke. ## Anwendungsfälle - Visualisierung von Projekt-Meilensteinen für interne Statusberichte. - Anzeige von Zielerreichungsgraden in Vertriebs-Dashboards. - Darstellung von Ladebalken oder Fertigstellungsraten in Web-Präsentationen. ## Häufig gestellte Fragen ### Welche Datenformate werden unterstützt? Sie können JSON-Arrays mit Labels und Werten, einfache Label:Wert-Paare oder eine Liste reiner Zahlenwerte verwenden. ### Kann ich die Farben der Ringe anpassen? Ja, Sie können aus vordefinierten Farbschemata wählen oder eigene Hex-Farben durch Kommas getrennt eingeben. ### Ist die Animation beim Laden zwingend erforderlich? Nein, Sie können die Animation in den Einstellungen deaktivieren, falls Sie eine statische Darstellung bevorzugen. ### Wie groß kann ich die Diagramme einstellen? Die Ringgröße lässt sich flexibel zwischen 100 und 400 Pixeln konfigurieren. ### Können mehrere Fortschrittskreise gleichzeitig erstellt werden? Ja, das Tool verarbeitet mehrere Werte gleichzeitig und erstellt für jeden Eintrag einen eigenen Fortschrittskreis. ## Ähnliche Tools - [Bewertungs-Stern-Diagramm](https://elysiatools.com/de/tools/rating-star-chart): Erstellen Sie schöne Stern-Bewertungsvisualisierungen für Produkte, Dienstleistungen und Benutzerfeedback-Analysen - [Rosendiagramm Generator](https://elysiatools.com/de/tools/rose-chart): Schöne Nightingale-Rosendiagramme (Coxcomb-Diagramme) generieren zur Visualisierung von Daten durch Winkel und Fläche, perfekt für vergleichende Analysen und historische Datendarstellung - [Stream-Graph-Generator](https://elysiatools.com/de/tools/stream-graph-generator): Schöne Stream-Graphen für Zeitreihendaten mit klaren Linienverbindungen und Basislinienvariationen generieren - [Zeitstrahl-Generator](https://elysiatools.com/de/tools/timeline-generator): Schöne und interaktive Zeitstrahlen aus Ereignisdaten mit verschiedenen Layouts und Stilen generieren - [Vergleichs-Balkendiagramm-Generator](https://elysiatools.com/de/tools/comparison-bar-chart): Rücken-an-Rücken-Balkendiagramme für den Vergleich von positiven und negativen Werten generieren, perfekt für den Kontrast von Datensätzen - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Donut-Diagramm-Generator](https://elysiatools.com/de/tools/donut-chart-generator): Erstellen Sie anpassbare Donut-Diagramme aus Daten mit verschiedenen Styling-Optionen, perfekt zur Anzeige von Proportionen mit zentralem Raum - [Trichter-Diagramm-Generator](https://elysiatools.com/de/tools/funnel-chart-generator): Erstellen Sie anpassbare Trichterdiagramme aus Daten, perfekt zur Anzeige von Konversionsraten, Verkaufspipelines und Prozessflüssen ## Beispiele - [Grafana Fortgeschrittene Anwendungsbeispiele](https://elysiatools.com/de/samples/grafana-samples): Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung - [QR-Code-Beispiele](https://elysiatools.com/de/samples/qrcode-samples): Beispiel-QR-Code-Bilder zum Testen von QR-Code-Lese- und Generierungswerkzeugen - [D3.js Datenvisualisierung Beispiele](https://elysiatools.com/de/samples/d3js-data-visualization): Umfassende D3.js datenvisualisierung beispiele einschließlich diagramme, karten, animationen und interaktive visualisierungen - [Rome JavaScript Toolchain Beispiele](https://elysiatools.com/de/samples/rome): Rome JavaScript Toolchain Beispiele einschließlich Konfiguration, Linting, Formatting, Bundling und Projektmanagement ## Verwandte Inhalte - [Generatoren für Charts und Diagramme](https://elysiatools.com/de/hubs/chart-diagram-generators): Wählen Sie eine Visualisierung für Vergleiche, Verteilungen, Hierarchien, Beziehungen und Zeitpläne.