Kategorien

← View All Tools

Fortschrittskreis-Diagramm

Erstellen Sie schöne kreisförmige Fortschrittsindikatoren mit Animationen, perfekt für die Anzeige von Prozentsätzen, Fertigstellungsraten und Fortschrittsmetriken

Fortschrittswerte (0-100). Unterstützt JSON-Array mit Labels, einfache Label:Wert-Paare oder nur Werte

Titel, der über dem Diagramm angezeigt wird

Größe jedes Fortschrittsrings in Pixeln

Dicke des Fortschrittsring-Strichs

Startwinkel in Grad (-90 = oben, 0 = rechts, 90 = unten, 180 = links)

Benutzerdefinierte Farben für Fortschrittsringe (hex-Farben durch Kommas getrennt)

Dauer der Fortschrittsanimation in Millisekunden

Hintergrundfarbe für den Diagrammcontainer

Prozentwert in der Mitte jedes Rings anzeigen

Beschriftung unter jedem Fortschrittsring anzeigen

Fortschrittsringe beim Laden animieren

Wichtige Fakten

Kategorie
Data Visualization
Eingabetypen
textarea, text, number, select, color, checkbox
Ausgabetyp
html
Sample-Abdeckung
4
API verfügbar
Yes

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

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.

So funktioniert es

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

Beispiele

1. Projekt-Status-Dashboard

Projektmanager
Hintergrund
Ein Projektmanager muss den Fortschritt von drei verschiedenen Teilprojekten in einem wöchentlichen Meeting präsentieren.
Problem
Die Beteiligten sollen auf einen Blick sehen, wie weit die einzelnen Phasen fortgeschritten sind, ohne lange Tabellen zu lesen.
Verwendung
Geben Sie die Projektdaten als JSON ein und wählen Sie das Farbschema 'Erfolg', um den Fortschritt hervorzuheben.
Beispielkonfiguration
[{"label": "Design", "value": 85}, {"label": "Entwicklung", "value": 60}, {"label": "QA", "value": 30}]
Ergebnis
Drei klare, animierte Fortschrittskreise zeigen den Status der Phasen, wobei die Prozentwerte direkt in der Mitte der Ringe angezeigt werden.

2. Vertriebs-KPI-Übersicht

Vertriebsleiter
Hintergrund
Der Vertriebsleiter möchte die Erreichung der monatlichen Verkaufsziele für das Team visualisieren.
Problem
Die aktuelle Performance im Vergleich zum Zielwert soll schnell und motivierend dargestellt werden.
Verwendung
Verwenden Sie die Einzelwerte der Zielerreichung und wählen Sie das Farbschema 'Gradient', um die Dringlichkeit zu verdeutlichen.
Beispielkonfiguration
95
75
40
Ergebnis
Drei Ringe visualisieren die Zielerreichung; durch den Farbverlauf ist sofort erkennbar, wer kurz vor dem Ziel steht und wer noch Unterstützung benötigt.

Mit Samples testen

json
PDF-Beispiele
Generierte PDF-Beispiele von Tools zwischen 2026-02-01 und 2026-02-10
preferred input family json
json
WebRTC Echtzeitkommunikation Beispiele
Umfassende WebRTC-Beispiele für P2P Audio/Video-Kommunikation, Datenkanäle, Bildschirmfreigabe und Signalisierungsserver
preferred input family json
json
Grafana Fortgeschrittene Anwendungsbeispiele
Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung
preferred input family json
json
ELK Stack Log-Analyse Beispiele
Umfassende ELK Stack Beispiele für Log-Aggregation, -Verarbeitung und -Visualisierung in verteilten Systemen
preferred input family json
json

Verwandte Hubs

Json-Generate-Tools
Entdecken Sie 33 json-Tools für generate-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Convert-Tools
Entdecken Sie 100 json-Tools für convert-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Tools
Entdecken Sie 43 json-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.
Json-Format-Tools
Entdecken Sie 6 json-Tools für format-Workflows und vergleichen Sie ähnliche Utilities schnell.

FAQ

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.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/progress-ring-chart

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
progressData textarea Ja Fortschrittswerte (0-100). Unterstützt JSON-Array mit Labels, einfache Label:Wert-Paare oder nur Werte
chartTitle text Nein Titel, der über dem Diagramm angezeigt wird
ringSize number Nein Größe jedes Fortschrittsrings in Pixeln
ringThickness number Nein Dicke des Fortschrittsring-Strichs
startAngle number Nein Startwinkel in Grad (-90 = oben, 0 = rechts, 90 = unten, 180 = links)
colorScheme select Nein -
customColors text Nein Benutzerdefinierte Farben für Fortschrittsringe (hex-Farben durch Kommas getrennt)
animationDuration number Nein Dauer der Fortschrittsanimation in Millisekunden
backgroundColor color Nein Hintergrundfarbe für den Diagrammcontainer
showPercentage checkbox Nein Prozentwert in der Mitte jedes Rings anzeigen
showLabel checkbox Nein Beschriftung unter jedem Fortschrittsring anzeigen
animated checkbox Nein Fortschrittsringe beim Laden animieren

Antwortformat

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Erstellen Sie schöne kreisförmige Fortschrittsindikatoren mit Animationen, perfekt für die Anzeige von Prozentsätzen, Fertigstellungsraten und Fortschrittsmetriken",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]