Wenn Sie sowohl das Gesamtvolumen als auch die Beiträge einzelner Unterkomponenten im Zeitverlauf verfolgen müssen, ist der Stacked Area Chart ist das ideale Visualisierungswerkzeug. Das Stapeln von Flächen in vertikaler Richtung erzeugt eine kontinuierliche Gesamtdarstellung, bei der die oberste Linie den Gesamtsummenwert darstellt, während die Breite der einzelnen Bänder die sich ändernden Beiträge der Unterkategorien zeigt, beispielsweise den Gesamtwebverkehr aufgeschlüsselt nach Suchmaschine, organischen Quellen und direkten Verweisen über mehrere Monate hinweg.
Die Funktionsweise von gestapelten Flächendiagrammen
Gestapelte Flächendiagramme kombinieren Linienreihenkonfigurationen mit übereinstimmenden stackAttributen. Wenn die Darstellungsmaschine identische stackIdentifikatoren über mehrere Reihen hinweg mit type: 'line' und areaStyleaktiviert sind, stapelt es jeden Datenpunkt sequenziell über dem vorhergehenden Linienpfad der Reihe entlang der vertikalen Y-Achse.
1. Grundlegende Einrichtung
Um ein grundlegendes gestapeltes Flächendiagramm zu erstellen, definieren Sie eine kontinuierliche X-Achse, setzen Sie type: 'line' bei jeder Reihe, aktivieren Sie areaStyle, und weisen Sie allen Reihen eine identische stackIdentifikation zu:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['E-Mail', 'Union Ads', 'Video Ads', 'Direkt']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'E-Mail',
type: 'line',
stack: 'Gesamt',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Gesamt',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Gesamt',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direkt',
type: 'line',
stack: 'Gesamt',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
Fortgeschrittene strukturelle Techniken
Gestapelte Flächendiagramme können so konfiguriert werden, dass sie entweder auf das gesamte kumulative Wachstum oder auf relative prozentuale Veränderungen im Zeitverlauf fokussieren.
1. Prozentuales Flächendiagramm mit 100 % Normalisierung
Wenn Sie prozentuale Veränderungen im Gegensatz zum Gesamtvolumen im Zeitverlauf bewerten, normalisieren Sie Ihre Datensätze auf 100 % pro horizontalem Zeitpunkt:
option = {
tooltip: {
trigger: 'axis',
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2023', '2024', '2025', '2026']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [65, 55, 48, 40]
},
{
name: 'Mobile',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [25, 35, 42, 50]
},
{
name: 'Tablet',
type: 'line',
stack: 'percent',
smooth: true,
areaStyle: {},
data: [10, 10, 10, 10]
}
]
};
Feinabstimmung von Layout und Stil
Da gestapelte Bereiche die Hintergrundfläche vollständig überdecken, hilft die Anpassung der Füll-Opazität und der Linienstriche dabei, die einzelnen Schichten klar und lesbar zu halten.
1. Benutzerdefinierte Schicht-Opazität und Trennlinien
Durch die Festlegung von festen Linienstrichen über leicht transparenten Bereichsfüllungen entstehen klare visuelle Grenzen zwischen benachbarten gestapelten Bändern:
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produkt A',
type: 'line',
stack: 'Volumen',
smooth: true,
lineStyle: { width: 2, color: '#5470c6' },
areaStyle: { color: '#5470c6', opacity: 0.7 },
data: [120, 150, 180, 210]
},
{
name: 'Produkt B',
type: 'line',
stack: 'Volumen',
smooth: true,
lineStyle: { width: 2, color: '#91cc75' },
areaStyle: { color: '#91cc75', opacity: 0.7 },
data: [220, 280, 250, 310]
},
{
name: 'Produkt C',
type: 'line',
stack: 'Volumen',
smooth: true,
lineStyle: { width: 2, color: '#fac858' },
areaStyle: { color: '#fac858', opacity: 0.7 },
data: [150, 190, 220, 260]
}
]
};
Strategische Best Practices
- Stabile Serien unten anordnen:Stellen Sie die größte oder wenigste volatile Serie unten im Stapel ab, um eine vorhersehbare Grundlage für die darüber liegenden Bänder zu schaffen.
- Anzahl der Bänder begrenzen:Das Stapeln von mehr als 4 bis 5 Serien macht die mittleren Bänder schwer zu genau bewerten. Überlegen Sie, kleinere Kategorien in eine Kategorie „Sonstige“ zusammenzufassen.
- Verwenden Sie
axisPointer: { type: 'cross' }:Die Kombination von Hover-Crosshairs mit einem kontinuierlichen Tooltip erleichtert das gezielte Finden spezifischer Datumswerte innerhalb dichter vertikaler Stapel.