Zur Analyse von Komponentenaufteilungen über Artikel mit langen Kategorietiteln ist die Stacked Bar Chart die ideale Wahl. Durch horizontales Stapeln von Datensegmenten von links nach rechts entlang der Y-Achse behält diese Visualisierung die Klarheit langer Beschriftungen bei, während sie sowohl die Gesamtsummen der Kategorien als auch die interne prozentuale Aufteilung. Sie funktioniert hervorragend bei Umfragen zu Bevölkerungsdaten, der Ressourcenallokation eines Projekts nach Abteilung oder mehrkanaligen Konversionspfaden.
Die Funktionsweise von gestapelten horizontalen Balken
Bei der Erstellung eines horizontalen gestapelten Diagramms wird dasselbe stackEigenschaft wie bei gestapelten Säulendiagrammen verwendet, kombiniert mit einer kategorienbasierten Y-Achse. Wenn mehrere type: 'bar'Reihen denselben stackSchlüssel bei horizontaler Ausrichtung teilen, addiert der Rendering-Engine die Werte von links nach rechts entlang der X-Achse.
1. Grundlegende Einrichtung
Um ein grundlegendes gestapeltes Balkendiagramm zu erstellen, legen Sie yAxis auf type: 'category', xAxis auf type: 'value', und weisen Sie jeder Reihe einen entsprechenden stackString zu jeder Reihe zu:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Engineering', 'Product', 'Design', 'Marketing']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Project Alpha', 'Project Beta', 'Project Gamma', 'Project Delta']
},
series: [
{
name: 'Engineering',
type: 'bar',
stack: 'allocation',
data: [320, 302, 301, 334]
},
{
name: 'Product',
type: 'bar',
stack: 'allocation',
data: [120, 132, 101, 134]
},
{
name: 'Design',
type: 'bar',
stack: 'allocation',
data: [220, 182, 191, 234]
},
{
name: 'Marketing',
type: 'bar',
stack: 'allocation',
data: [150, 212, 201, 154]
}
]
};
Erweiterte strukturelle Techniken
Stapelweise horizontale Balken können für einen absoluten Volumenvergleich konfiguriert werden oder normalisiert werden, um prozentuale Verhältnisse über Kategorien hinweg anzuzeigen.
1. Horizontaler Balken-Diagramm mit 100 % Normalisierung
Um relative Verhältnisse anstelle absoluter Zahlen über lange Kategorien hinweg zu bewerten, normalisieren Sie Ihre Seriendaten so, dass sie pro Zeile 100 % ergeben:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Zufrieden', 'Neutral', 'Unzufrieden']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Unternehmenskunden-Erfolg',
'Mittelständische Support-Dienstleistungen',
'Selbstbedienungs-Onboarding'
]
},
series: [
{
name: 'Zufrieden',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Neutral',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Unzufrieden',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Feinabstimmung von Layout und Stil
Saubere visuelle Grenzen und abgerundete äußere Enden verleihen horizontalen Stapelbalken ein glattes, modernes Erscheinungsbild.
1. Segmenttrennung und Abrundung der äußeren Enden
Wenden Sie dünne vertikale Randlinien an, um innere Segmente zu trennen, und beschränken Sie die Eckenrundung auf das letzte Segment rechts:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Q1-Budget', 'Q2-Budget', 'Q3-Budget', 'Q4-Budget']
},
series: [
{
name: 'Feste Kosten',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Variable Kosten',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Freiwillige Ausgaben',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Abgerundete Ecken am rechten Endstück
}
}
]
};
Strategische Best Practices
- Erstes Segment-Baseline:Das Segment, das der Y-Achsen-Basline am nächsten liegt, ist am einfachsten über Kategorien hinweg zu vergleichen. Stellen Sie immer Ihre wichtigste Komponente als erstes Serienobjekt.
- Grenze die Stapelkomponenten:Begrenzen Sie die Gesamtanzahl der Stapelsegmente auf fünf oder weniger pro Balken, um eine klare visuelle Analyse zu gewährleisten, ohne den Betrachter zu überfordern.
- Textbeschriftungen innerhalb des Balkens: Bei horizontalen Stapelbalken mit breiten Segmenten sollten Sie erwägen,
Beschriftung: { anzeigen: true, position: 'innerhalb' }zu aktivieren, damit die einzelnen Segmentwerte lesbar sind, ohne sich auf Hover-Tooltips zu verlassen.