Beim Evaluieren der strukturellen Aufteilung über diskrete Metriken bietet die Stacked Column Chartbietet eine effiziente Möglichkeit, Teil-zu-Ganzes-Verteilungen darzustellen. Im Gegensatz zu gruppierten Layouts, die Datenserien horizontal verteilen, akkumulieren gestapelte Diagramme Werte vertikal innerhalb einer einzigen Spaltenbegrenzung. Dieses Format erleichtert die Überwachung von Gesamtwachstum der Kategorie, während die sich verändernden Anteile der internen Unterkomponenten verfolgt werden, beispielsweise Gerätetransport nach Betriebssystem oder Quartalsausgaben aufgeschlüsselt nach Abteilungen.
Die Mechanik gestapelter Säulen
Gestapelte Säulendiagramme beruhen darauf, einer übereinstimmenden stackIdentifikator über mehrere Serien hinweg zuzuweisen. Wenn die Rendering-Engine identische stackString-Werte in einer Serie mit type: 'bar'erkennt, stapelt es die numerischen Werte sequenziell entlang der vertikalen Y-Achse, anstatt überlappende oder nebeneinander stehende Säulen darzustellen.
1. Grundlegende Einrichtung
Um ein grundlegendes gestapeltes Säulendiagramm zu erstellen, definieren Sie eine kategorienbasierte X-Achse und wenden eine gemeinsame stackEigenschaft auf jede Serie in Ihrem seriesArray:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Direkt', 'Organische Suche', 'Bezahlte Anzeigen', 'Verweis']
},
xAxis: {
type: 'category',
data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Direkt',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Organische Suche',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Bezahlte Anzeigen',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Verweis',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Erweiterte strukturelle Techniken
Gestapelte Säulendiagramme können je nach Ihren analytischen Anforderungen so angepasst werden, dass prozentuale Verteilungen oder selektive Untergliederungen angezeigt werden.
1. 100 % normalisierte gestapelte Säulen
Wenn Ihr Hauptziel darin besteht, Anteilsverhältnisse zu vergleichen, anstatt absolute Zahlenwerte, konvertieren Sie Ihre Datenwerte in normalisierte Prozentsätze, die pro Kategorie insgesamt 100 % ergeben:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Mobile',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Tablet',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Mehrfach-Stack-Gruppierung
Sie können Gruppierung und Stapelung in einer einzigen Ansicht kombinieren, indem Sie unterschiedlicheStackIdentifikatoren über die Serien hinweg verwenden. Zum Beispiel: Vergleich von tatsächlichen gegenüber Zielwerten, wobei jeder aus gestapelten Unterkomponenten besteht:
option = {
legend: {
data: ['Produkt A tatsächlich', 'Produkt B tatsächlich', 'Produkt A Ziel', 'Produkt B Ziel']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produkt A tatsächlich',
type: 'bar',
stack: 'tatsächlich',
data: [120, 150, 180, 200]
},
{
name: 'Produkt B tatsächlich',
type: 'bar',
stack: 'tatsächlich',
data: [80, 90, 100, 110]
},
{
name: 'Produkt A Ziel',
type: 'bar',
stack: 'Ziel',
data: [130, 160, 190, 210]
},
{
name: 'Produkt B Ziel',
type: 'bar',
stack: 'Ziel',
data: [90, 100, 110, 120]
}
]
};
Feinabstimmung von Layout und Stil
Eine ansprechende visuelle Gestaltung ist entscheidend für gestapelte Säulen, um sicherzustellen, dass die Segmente unterscheidbar bleiben, ohne visuelle Ermüdung zu verursachen.
1. Segmentgrenzen und abgerundete Oberkanten
Wenden Sie saubere Grenzlinien zwischen den gestapelten Segmenten an und beschränken Sie die Eckenrundung auf das oberste Segment der Stapelreihe:
option = {
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Basis-Ebene',
type: 'bar',
stack: 'Gesamt',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Mittlere Ebene',
type: 'bar',
stack: 'Gesamt',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Oberste Ebene',
type: 'bar',
stack: 'Gesamt',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Nur oben abgerundete Ecken
}
}
]
};
Strategische Best Practices
- Anzahl der Segmente begrenzen:Vermeiden Sie das Stapeln von mehr als 4 bis 5 Kategorien pro Säule. Über diesen Schwellenwert hinaus wird das Vergleichen der mittleren Segmente zwischen den Säulen visuell herausfordernd.
- Basiselemente am unteren Rand ausrichten:Stellen Sie Ihren wichtigsten Kennwert oder die größte Unterkomponente als erstes Element im
ReiheArray, damit es direkt auf der Baseline liegt und eine einfache Ausrichtung ermöglicht. - Hochkontrast-Palette oder Grenzlinien verwenden:Wenden Sie subtile weiße Grenzlinien zwischen den Segmenten an, um eine klare Unterscheidung zu gewährleisten, wenn benachbarte Farben ähnliche Kontraststufen aufweisen.