Gruppiertes Säulendiagramm: Mehrreihige Daten und Abstände

Bei der Datenanalyse und Geschäftsdarstellung ist das Gruppierte Säulendiagramm (auch als gruppiertes Säulendiagramm bekannt) ist das primäre Werkzeug für die vergleichende Darstellung über mehrere Dimensionen. Während ein Standard-Säulendiagramm pro Kategorie eine einzelne Metrik bewertet, platziert ein gruppiertes Säulendiagramm verwandte Datensätze nebeneinander innerhalb desselben Kategorie-Bins. Dadurch wird eine sofortige visuelle Bewertung von Trends über die Zeit, Leistung über Teams oder mehrdimensionale Leistung.

Die Funktionsweise gruppiertes Säulendiagramm

Gruppierte Säulendiagramme arbeiten mit einem gemeinsamen Koordinatensystem, bei dem die horizontale Achse diskrete Kategorien darstellt und die vertikale Achse kontinuierliche Werte verarbeitet. Die Gruppierung wird erreicht, indem mehrere Serienobjekte deklariert werden, die exakt die gleiche Kategorien-Ausrichtung auf der horizontalen Achse teilen. Der Layout-Engine wird automatisch der erforderliche Versatz berechnet und jede Serie nebeneinander innerhalb ihres jeweiligen Kategorie-Blocks gerendert.

1. Grundlegende Einrichtung

Um ein gruppiertes Säulendiagramm zu erstellen, definieren Sie eine einzelne kategoriale Achse und geben Sie mehrere Serienobjekte mit type: 'bar':

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Umsatz 2025', 'Umsatz 2026']
    },
    xAxis: {
        type: 'category',
        data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Umsatz 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Umsatz 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Durch Hinzufügen einer dritten oder vierten Serie erhöht sich die Dichte des Diagramms. Um Klarheit zu bewahren, können Sie die Serien-Stilisierung, Layout-Abstände und visuelle Hinweise feinjustieren.

1. Benutzerdefinierte Stilisierung über Gruppen hinweg

Durch Anwendung einzigartiger Farben, abgerundeter Ecken oder benutzerdefinierter Elementstile wird es einfach, einzelne Gruppen innerhalb dichter Diagramme zu unterscheiden:

option = {
    legend: {
        data: ['Produkt A', 'Produkt B', 'Produkt C']
    },
    xAxis: {
        type: 'category',
        data: ['Nordamerika', 'Europa', 'Asien-Pazifik']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Produkt A',
            type: 'bar',
            data: [150, 230, 224],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produkt B',
            type: 'bar',
            data: [180, 200, 210],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produkt C',
            type: 'bar',
            data: [120, 140, 190],
            itemStyle: {
                color: '#fac858',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Feinabstimmung von Layout und Abständen

Die Abstände sind entscheidend bei der Arbeit mit gruppierten Säulen. Die Kontrolle des Abstands zwischen Säulen innerhalb derselben Gruppe im Vergleich zum Abstand zwischen getrennten Kategorieguppen verhindert visuelle Überlastung.

1. Innere Abstände im Vergleich zu Kategorien-Abständen

Verwenden Sie Abstandsattribute, um die Layout-Dichte auszugleichen:

• barGap: Steuert den Abstand zwischen den Säulen innerhalb derselben Kategoriegruppe (z. B. '20%' oder '0%' für berührende Säulen).
• barCategoryGap: Steuert den Abstand zwischen verschiedenen Kategoriegruppen (z. B. '40%').
• barWidth: Steuert die Säulenbreite im Verhältnis zum Kategorieraum.

option = {
    legend: {
        data: ['Geplant', 'Tatsächlich']
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Geplant',
            type: 'bar',
            data: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            name: 'Tatsächlich',
            type: 'bar',
            data: [95, 125, 130, 170, 175]
        }
    ]
};

Strategische Best Practices

• Anzahl der Gruppen begrenzen: Vermeiden Sie, mehr als 3 bis 4 Säulen in einer einzigen Gruppe zu platzieren. Zu viele Säulen pro Kategorie machen die Grafik schwer lesbar.
• Immer eine Legende einfügen: Da gruppierte Diagramme Farbe verwenden, um Variablen zu unterscheiden, ist eine klare Legende oben oder unten zwingend erforderlich, um den Kontext zu gewährleisten.
• Konsistente Gruppenreihenfolge: Halten Sie die Reihenfolge der Serien in jeder Kategorie konsistent (z. B. stellen Sie „2025“ immer vor „2026“).