Elysia Tools Docs
DE
Sprache
ZHESPTRUFRDEEN
Zurück zur Website
Werkzeuge durchsuchen

Data Visualization

Fortschrittskreis-Diagramm

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

html· HTML-ErgebnisWerkzeug öffnen

Schnellstart

Rufen Sie dieses Werkzeug aus Ihrem Code in drei Sprachen auf.

cURL
curl -X POST 'https://api.elysiatools.com/de/api/tools/progress-ring-chart' \
  -H 'Content-Type: application/json' \
  -d '{"progressData":"JSON format:\n[{"label": "Project A", "value": 75},\n{"label": "Project B", "value": 90},\n{"label": "Project C", "value": 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45","chartTitle":"Diagrammtitel eingeben...","ringSize":"200","ringThickness":"15","startAngle":"-90","colorScheme":"default","customColors":"#3b82f6,#10b981,#f59e0b","animationDuration":"1000","backgroundColor":"#ffffff","showPercentage":true,"showLabel":true,"animated":true}'

© 2026 Elysia Tools. Entwicklerdokumentation.

Zurück zur WebsiteWerkzeuge durchsuchen

API-Referenz

Senden Sie eine POST-Anfrage mit Ihren Eingaben als JSON. Dateiparameter erfordern einen vorherigen Upload.

Endpunkt

HTTP
POST https://api.elysiatools.com/de/api/tools/progress-ring-chart

Parameter

NameTypErforderlichBeschreibung
progressDatatextareaJaFortschrittswerte (0-100). Unterstützt JSON-Array mit Labels, einfache Label:Wert-Paare oder nur Werte
chartTitletextNeinTitel, der über dem Diagramm angezeigt wird
ringSizenumberNeinGröße jedes Fortschrittsrings in Pixeln
ringThicknessnumberNeinDicke des Fortschrittsring-Strichs
startAnglenumberNeinStartwinkel in Grad (-90 = oben, 0 = rechts, 90 = unten, 180 = links)
colorSchemeselectNein—
customColorstextNeinBenutzerdefinierte Farben für Fortschrittsringe (hex-Farben durch Kommas getrennt)
animationDurationnumberNeinDauer der Fortschrittsanimation in Millisekunden
backgroundColorcolorNeinHintergrundfarbe für den Diagrammcontainer
showPercentagecheckboxNeinProzentwert in der Mitte jedes Rings anzeigen
showLabelcheckboxNeinBeschriftung unter jedem Fortschrittsring anzeigen
animatedcheckboxNeinFortschrittsringe beim Laden animieren

Antwortformat

HTML-Ergebnis

JSON
{
  "result": "<div>Processed HTML content</div>",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

MCP-Integration

Fügen Sie dieses Werkzeug Ihrem Model-Context-Protocol-Server hinzu, damit KI-Agenten es auflisten und aufrufen können.

Serverkonfiguration

Fügen Sie diesen Block Ihrer MCP-Client-Konfiguration hinzu:

mcp.json
{
  "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://api.elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Verfügbare Werkzeuge auflisten

Nach dem Verbinden mit dem SSE-Endpunkt listen Sie die bereitgestellten Werkzeuge auf:

tools/list
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list"
}

Dieses Werkzeug aufrufen

Rufen Sie das Werkzeug über seine ID auf; Argumente werden aus seiner Parameterliste gebildet:

tools/call
{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "progress-ring-chart",
    "arguments": {
  "progressData": "JSON format:\n[{&quot;label&quot;: &quot;Project A&quot;, &quot;value&quot;: 75},\n{&quot;label&quot;: &quot;Project B&quot;, &quot;value&quot;: 90},\n{&quot;label&quot;: &quot;Project C&quot;, &quot;value&quot;: 45}]\n\nor text format:\nProject A:75\nProject B:90\nProject C:45\n\nor single values:\n75\n90\n45",
  "chartTitle": "Diagrammtitel eingeben...",
  "ringSize": "200",
  "ringThickness": "15",
  "startAngle": "-90",
  "colorScheme": "default",
  "customColors": "#3b82f6,#10b981,#f59e0b",
  "animationDuration": "1000",
  "backgroundColor": "#ffffff",
  "showPercentage": true,
  "showLabel": true,
  "animated": true
}
  }
}
Verketten Sie mehrere Werkzeuge in einer Sitzung mit einer kommagetrennten toolId-Liste, z. B. /mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp (max. 20).

Fragen oder Probleme? Kontakt: [email protected]

Werkzeuge durchsuchen
Werkzeug öffnen