Data Visualization
Erstellen Sie anpassbare Flächendiagramme aus Daten mit gefüllten Bereichen unter Linien, perfekt zur Anzeige von Trends und kumulativen Daten
Rufen Sie dieses Werkzeug aus Ihrem Code in drei Sprachen auf.
curl -X POST 'https://api.elysiatools.com/de/api/tools/area-chart-generator' \
-H 'Content-Type: application/json' \
-d '{"chartData":"Single line JSON:\n[{"label": "Jan", "value": 100},\n{"label": "Feb", "value": 150}]\n\nMulti-line JSON:\n{\n "labels": ["Jan", "Feb", "Mar"],\n "series": [\n {"name": "Product A", "data": [100, 150, 120]}\n ]\n}\n\nor text format:\nJan:100\nFeb:150","chartTitle":"Diagrammtitel eingeben...","curveType":"linear","areaColors":"#3b82f6,#ef4444,#10b981","fillOpacity":"0.3","stacked":false,"backgroundColor":"#ffffff","gridColor":"#e0e0e0","lineWidth":"2","chartHeight":"400","maxValue":0,"minValue":0,"xAxisLabel":"Category","yAxisLabel":"Value","showGrid":true,"showPoints":true,"showValues":true,"showLegend":true}'Senden Sie eine POST-Anfrage mit Ihren Eingaben als JSON. Dateiparameter erfordern einen vorherigen Upload.
POST https://api.elysiatools.com/de/api/tools/area-chart-generator| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
| chartData | textarea | Ja | Daten für das Diagramm. Unterstützt einzeiliges Array, mehrzeiliges Objekt oder einfaches Textformat |
| chartTitle | text | Nein | Titel, der über dem Diagramm angezeigt wird |
| curveType | select | Nein | — |
| areaColors | text | Nein | Farben für mehrere Bereiche (kommagetrennte Hex-Farben). Leer lassen für Standardfarben. |
| fillOpacity | number | Nein | Opazität der Flächenfüllung (0.0 bis 1.0) |
| stacked | checkbox | Nein | Bereiche übereinander stapeln statt überlappen |
| backgroundColor | color | Nein | Hintergrundfarbe für den Diagrammcontainer |
| gridColor | color | Nein | Farbe für die Rasterlinien |
| lineWidth | number | Nein | Breite der Bereichsrandlinien in Pixeln |
| chartHeight | number | Nein | Höhe des Diagramms in Pixeln |
| maxValue | number | Nein | Maximalwert für Y-Achse (leer lassen für automatische Skalierung) |
| minValue | number | Nein | Minimalwert für Y-Achse |
| xAxisLabel | text | Nein | Beschriftung für die X-Achse |
| yAxisLabel | text | Nein | Beschriftung für die Y-Achse |
| showGrid | checkbox | Nein | Rasterlinien für bessere Lesbarkeit anzeigen |
| showPoints | checkbox | Nein | Datenpunkte am Bereichsrand anzeigen |
| showValues | checkbox | Nein | Tatsächliche Werte auf Datenpunkten anzeigen |
| showLegend | checkbox | Nein | Eine Legende unter dem Diagramm anzeigen |
HTML-Ergebnis
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}Fügen Sie dieses Werkzeug Ihrem Model-Context-Protocol-Server hinzu, damit KI-Agenten es auflisten und aufrufen können.
Fügen Sie diesen Block Ihrer MCP-Client-Konfiguration hinzu:
{
"mcpServers": {
"elysiatools-area-chart-generator": {
"name": "area-chart-generator",
"description": "Erstellen Sie anpassbare Flächendiagramme aus Daten mit gefüllten Bereichen unter Linien, perfekt zur Anzeige von Trends und kumulativen Daten",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=area-chart-generator",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Nach dem Verbinden mit dem SSE-Endpunkt listen Sie die bereitgestellten Werkzeuge auf:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Rufen Sie das Werkzeug über seine ID auf; Argumente werden aus seiner Parameterliste gebildet:
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "area-chart-generator",
"arguments": {
"chartData": "Single line JSON:\n[{"label": "Jan", "value": 100},\n{"label": "Feb", "value": 150}]\n\nMulti-line JSON:\n{\n "labels": ["Jan", "Feb", "Mar"],\n "series": [\n {"name": "Product A", "data": [100, 150, 120]}\n ]\n}\n\nor text format:\nJan:100\nFeb:150",
"chartTitle": "Diagrammtitel eingeben...",
"curveType": "linear",
"areaColors": "#3b82f6,#ef4444,#10b981",
"fillOpacity": "0.3",
"stacked": false,
"backgroundColor": "#ffffff",
"gridColor": "#e0e0e0",
"lineWidth": "2",
"chartHeight": "400",
"maxValue": 0,
"minValue": 0,
"xAxisLabel": "Category",
"yAxisLabel": "Value",
"showGrid": true,
"showPoints": true,
"showValues": true,
"showLegend": true
}
}
}Fragen oder Probleme? Kontakt: [email protected]