Kategorien

← View All Tools

Gestapeltes Balkendiagramm Generator

Interaktive gestapelte Balkendiagramme generieren zur Visualisierung kategorischer Datenzusammensetzung, perfekt zum Vergleich mehrerer Datenreihen über Kategorien hinweg

Daten für das gestapelte Balkendiagramm im JSON-Format mit Kategorie-, Reihen- und Wertfeldern

Titel, der über dem Diagramm angezeigt wird

JSON-Array von Hex-Farben (erfordert Auswahl benutzerdefinierter Farben)

Höhe des Diagramms in Pixeln (min: 300, max: 800)

Abstand zwischen Balken (0.1 - 0.5)

Hintergrundfarbe für den Diagrammcontainer

Werte oder Prozentsätze auf den Balken anzeigen

Farblegende für Reihen anzeigen

Horizontale Rasterlinien anzeigen

Animate bars when chart loads

Prozentsätze anstelle von Werten auf Balken anzeigen

Detaillierte Informationen beim Hover anzeigen

Wichtige Fakten

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

Überblick

Der Gestapelte Balkendiagramm Generator erstellt interaktive Diagramme zur Visualisierung der Zusammensetzung kategorischer Daten. Perfekt geeignet, um mehrere Datenreihen über verschiedene Kategorien hinweg zu vergleichen und Anteile darzustellen.

Wann verwenden

  • •Wenn Sie die prozentuale oder absolute Zusammensetzung von Daten in Kategorien wie Quartalen, Regionen oder Produktlinien anzeigen möchten.
  • •Zum direkten Vergleich mehrerer Datenreihen, beispielsweise Verkaufszahlen verschiedener Produkte über die Zeit.
  • •Für die Erstellung visueller Berichte oder Präsentationen, die komplexe Datenvergleiche verständlich machen sollen.

So funktioniert es

  • •Geben Sie Ihre Daten im JSON-Format mit den Feldern 'category', 'series' und 'value' ein, um die Grundstruktur des Diagramms zu definieren.
  • •Passen Sie das Diagramm mit Optionen wie Titel, Farbschema, Wertformat und Anzeigeeinstellungen (z.B. Legende, Rasterlinien) an.
  • •Generieren Sie das interaktive HTML-Diagramm, das Werte auf Balken, Tooltips und Animationen unterstützen kann.
  • •Das fertige Diagramm kann direkt in Webseiten eingebettet oder als Teil von Berichten verwendet werden.

Anwendungsfälle

Visualisierung von Verkaufsdaten, um den Umsatzanteil verschiedener Produktkategorien über mehrere Quartale zu vergleichen.
Darstellung von Umfrageergebnissen, bei denen mehrere Antwortoptionen pro Frage die Zusammensetzung der Antworten zeigen.
Analyse von Ressourcenaufteilungen in Projekten, etwa den Zeitanteil verschiedener Aufgaben pro Teammitglied.

Beispiele

1. Quartalsumsatz nach Produktlinien

Verkaufsleiter
Hintergrund
Ein Unternehmen analysiert den Umsatz von drei Produktlinien (A, B, C) über vier Quartale, um Trends zu erkennen.
Problem
Die Rohdaten in einer Tabelle machen es schwer, die relativen Anteile und Veränderungen pro Quartal schnell zu erfassen.
Verwendung
Daten als JSON eingeben: [{'category': 'Q1', 'series': 'Produkt A', 'value': 50000}, {'category': 'Q1', 'series': 'Produkt B', 'value': 75000}, ...]. Titel 'Quartalsumsatz' setzen und Farbschema 'Professionell' wählen.
Beispielkonfiguration
chartData: JSON mit Kategorie, Reihe, Wert; chartTitle: 'Quartalsumsatz'; colorScheme: 'professional'; showValues: true; showPercentage: false
Ergebnis
Ein gestapeltes Balkendiagramm zeigt den Umsatzanteil jeder Produktlinie pro Quartal, mit Werten auf den Balken und einer Legende zur schnellen Orientierung.

2. Kundenzufriedenheits-Umfrage

Marktforscher
Hintergrund
Eine Umfrage erfasst die Zufriedenheit in fünf Kategorien (Service, Preis, Qualität, Lieferzeit, Support) mit Bewertungen von 1 bis 5.
Problem
Die aggregierten Daten sollen visualisiert werden, um zu zeigen, wie sich die Bewertungen in jeder Kategorie zusammensetzen.
Verwendung
Umfragedaten als JSON strukturieren: [{'category': 'Service', 'series': 'Bewertung 5', 'value': 120}, {'category': 'Service', 'series': 'Bewertung 4', 'value': 85}, ...]. Option 'Prozentsätze anzeigen' aktivieren, um relative Häufigkeiten darzustellen.
Ergebnis
Das Diagramm zeigt für jede Kategorie die prozentuale Verteilung der Bewertungen, erleichtert den Vergleich der Zufriedenheitsaspekte und unterstützt die Identifikation von Verbesserungspotenzialen.

Mit Samples testen

json
Grafana Fortgeschrittene Anwendungsbeispiele
Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung
preferred input family json
json
D3.js Datenvisualisierung Beispiele
Umfassende D3.js datenvisualisierung beispiele einschließlich diagramme, karten, animationen und interaktive visualisierungen
preferred input family json
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

Verwandte Hubs

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-Generate-Tools
Entdecken Sie 33 json-Tools für generate-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

Welches genaue Datenformat wird für die Eingabe benötigt?

Die Daten müssen als JSON-Array mit Objekten vorliegen, die jeweils die Felder 'category' (Kategorie), 'series' (Datenreihe) und 'value' (Wert) enthalten.

Kann ich die Farben der Balken individuell anpassen?

Ja, Sie können ein vordefiniertes Farbschema wählen oder bei Auswahl von 'Benutzerdefinierte Farben' ein JSON-Array mit Hex-Farben angeben.

In welchem Format wird das Diagramm ausgegeben?

Das Diagramm wird als interaktives HTML generiert, das sich nahtlos in Webseiten einbetten lässt und keine zusätzliche Software erfordert.

Ist es möglich, Prozentsätze statt absoluter Werte anzuzeigen?

Ja, aktivieren Sie die Option 'Prozentsätze anzeigen', um relative Anteile pro Kategorie darzustellen, oder nutzen Sie das Wertformat 'Prozentsatz'.

Kann ich die Größe des Diagramms anpassen?

Ja, über die Option 'Diagrammhöhe' können Sie die Höhe in Pixeln zwischen 300 und 800 festlegen, um es an Ihren Platzbedarf anzupassen.

API-Dokumentation

Request-Endpunkt

POST /de/api/tools/stacked-bar-chart

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
chartData textarea Ja Daten für das gestapelte Balkendiagramm im JSON-Format mit Kategorie-, Reihen- und Wertfeldern
chartTitle text Nein Titel, der über dem Diagramm angezeigt wird
colorScheme select Nein -
customColors textarea Nein JSON-Array von Hex-Farben (erfordert Auswahl benutzerdefinierter Farben)
valueFormat select Nein -
chartHeight number Nein Höhe des Diagramms in Pixeln (min: 300, max: 800)
barSpacing number Nein Abstand zwischen Balken (0.1 - 0.5)
backgroundColor color Nein Hintergrundfarbe für den Diagrammcontainer
showValues checkbox Nein Werte oder Prozentsätze auf den Balken anzeigen
showLegend checkbox Nein Farblegende für Reihen anzeigen
showGrid checkbox Nein Horizontale Rasterlinien anzeigen
showAnimation checkbox Nein Animate bars when chart loads
showPercentage checkbox Nein Prozentsätze anstelle von Werten auf Balken anzeigen
enableTooltip checkbox Nein Detaillierte Informationen beim Hover anzeigen

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-stacked-bar-chart": {
      "name": "stacked-bar-chart",
      "description": "Interaktive gestapelte Balkendiagramme generieren zur Visualisierung kategorischer Datenzusammensetzung, perfekt zum Vergleich mehrerer Datenreihen über Kategorien hinweg",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stacked-bar-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]