Flächendiagramm: Volumentrends und quantitative Flächen

Um sowohl die Trendrichtung als auch das Gesamtvolumen über kontinuierliche Zeit hervorzuheben, bietet das Flächendiagramm bietet einen ausdrucksstarken visuellen Ansatz. Durch Ausfüllen des Bereichs zwischen der Trendlinie und der horizontalen Achse lenken Flächendiagramme die Aufmerksamkeit auf relative Größenordnung und Gesamtvolumenveränderungen über Sequenzen hinweg, wie beispielsweise die Server-Bandbreitennutzung, die Anzahl aktiver Nutzer oder der tägliche Transaktionsdurchsatz.

Die Funktionsweise von Flächendiagrammen

Flächendiagramme basieren direkt auf der Konfiguration von Liniendiagrammen. Durch Festlegen von type: 'line' und Hinzufügen einer areaStyleEigenschaft in einem Serienobjekt füllt der Rendering-Engine automatisch den geometrischen Raum unterhalb des Linienpfads bis zur horizontalen Grundlinie aus.

1. Grundlegende Einrichtung

Um ein einfaches Flächendiagramm zu erstellen, definieren Sie eine kontinuierliche X-Achse, legen Sie die Serie type: 'line', und deklarieren Sie ein leeres oder angepasstes areaStyleObjekt:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            areaStyle: {}, // Aktiviert die Standardflächenfüllung
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Flächendiagramme können durch moderne Farbverläufe und sanfte Kurven verbessert werden, um Lesbarkeit und visuelle Qualität zu steigern.

1. Farbverlaufsfüllung

Eine einfarbige Füllung kann manchmal schwer wirken. Durch Anwendung eines halbtransparenten linearen Verlaufs entsteht ein modernes, schmales Erscheinungsbild, bei dem die Füllung sanft in Richtung der unteren Achse verblasst:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            areaStyle: {
                opacity: 0.8,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
                        { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
                    ]
                }
            },
            data: [320, 450, 410, 680, 890, 950]
        }
    ]
};

2. Überlappende Vergleich mehrerer Flächenreihen

Wenn mehrere Flächenreihen in einem einzigen Diagramm dargestellt werden, ist die Anpassung der Füll-Transparenz entscheidend, damit die zugrundeliegenden Datenpfade vollständig sichtbar bleiben:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Eingehender Verkehr', 'Ausgehender Verkehr']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Eingehender Verkehr',
            type: 'line',
            smooth: true,
            areaStyle: { opacity: 0.4 },
            data: [120, 200, 450, 600, 700, 380]
        },
        {
            name: 'Ausgehender Verkehr',
            type: 'line',
            smooth: true,
            areaStyle: { opacity: 0.4 },
            data: [80, 140, 310, 420, 510, 260]
        }
    ]
};

Feinabstimmung von Layout und Abständen

Da Flächenfüllungen bis zur Y-Achsen-Basis reichen, sorgt die Konfiguration kontinuierlicher Randabstände dafür, dass die Füllung sauber mit dem Rand der Zeichenfläche ausgerichtet bleibt.

1. Nahtlose Ausrichtung der Kanten

Durch die Einstellung von boundaryGap: falseauf der Kategorien-X-Achse beginnt die Füllung am absoluten linken Rand des Container-Rasters und endet sauber am rechten Rand:

option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            areaStyle: {
                color: 'rgba(145, 204, 117, 0.3)'
            },
            lineStyle: {
                color: '#91cc75',
                width: 2
            },
            data: [150, 230, 224, 318]
        }
    ]
};

Strategische Best Practices

• Niedrige Füll-Opazitäten verwenden:Harte Flächenfüllungen blockieren die darunterliegenden Gitterlinien und überlappende Serien. Halten Sie immer Transparenzlevel zwischen 20 % und 50 % für hohe Kontrastwerte.
• Begrenzen Sie die Serien auf 2 oder 3:Zu viele überlappende Flächenformen verursachen visuelle Verwirrung. Verwenden Sie für 4 oder mehr kumulative kontinuierliche Datensätze stattdessen ein gestacktes Flächen-Diagramm.
• Setzen Sie boundaryGap: false:Das Entfernen horizontaler Ränder auf Zeitachsen ermöglicht es, dass Flächenfüllungen die gesamte Rasterbreite einnehmen, ohne unangenehme leere Abstände an den linken und rechten Rändern zu hinterlassen.