Gruppiertes Balkendiagramm: Horizontale Mehrreihenvergleich

Der Vergleich sekundärer Metriken über lange Kategoriennamen wird am besten mit einemGruppiertes Balkendiagramm. Durch die Anordnung verwandter horizontaler Balken nebeneinander entlang der Y-Achse ermöglicht diese Anordnung es Benutzern, Leistungsmetriken über mehrere Kategorien hinweg zu scannen, ohne die Lesbarkeit der Beschriftungen zu beeinträchtigen. Es eignet sich als effektive Wahl für mehrjährige Budgetaufschlüsselungen, Produktmerkmalsvergleiche oder Verkaufsbenchmarking über mehrere Regionen hinweg, bei denen die Kategorienbezeichnungen ausreichend horizontalen Platz benötigen.

Die Funktionsweise gruppiert horizontaler Balken

Wie vertikale Säulen-Gruppen werden horizontale Balkengruppen erstellt, indem identische kategoriale Bezeichnungen der Y-Achse zugewiesen werden, während mehrere Serien mittype: 'bar'. Der Rendering-Engine übernimmt die visuelle Gruppierung automatisch und verschiebt jede Serie innerhalb des Kategorieblocks entlang der vertikalen Ebene.

1. Grundlegende Einrichtung

Um ein gruppiertes Balkendiagramm zu erstellen, weisen Sie Ihre diskreten Kategorien zuyAxis.data, geben Sie eine numerischexAxis, und fügen Sie mehrere Balkenreihen hinzu:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['2025 Zugeordnet', '2026 Zugeordnet']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Forschung & Entwicklung', 'Marketing & Vertrieb', 'Kundensupport', 'Betrieb']
    },
    series: [
        {
            name: '2025 Zugeordnet',
            type: 'bar',
            data: [320, 450, 210, 380]
        },
        {
            name: '2026 Zugeordnet',
            type: 'bar',
            data: [380, 490, 240, 410]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Die Erweiterung Ihres Diagramms auf drei oder mehr Serien liefert detailliertere Einblicke, vorausgesetzt, die visuelle Dichte bleibt leicht lesbar.

1. Mehrmetrische Gestaltung mit benutzerdefinierten Farbverläufen

Wenden Sie eindeutige Farbpaletten oder subtile Farbverläufe über die horizontalen Serien an, um unterschiedliche Gruppen lesbar zu halten:

option = {
    legend: {
        data: ['Q1 Umsatz', 'Q2 Umsatz', 'Q3 Umsatz']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Nordregion', 'Südregion', 'Ostregion', 'Westregion']
    },
    series: [
        {
            name: 'Q1 Umsatz',
            type: 'bar',
            data: [120, 200, 150, 80],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Q2 Umsatz',
            type: 'bar',
            data: [140, 220, 170, 95],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [0, 4, 4, 0]
            }
        },
        {
            name: 'Q3 Umsatz',
            type: 'bar',
            data: [180, 250, 190, 110],
            itemStyle: {
                color: '#fac858',
                borderRadius: [0, 4, 4, 0]
            }
        }
    ]
};

Feinabstimmung von Layout und Abstand

Die Steuerung der Balkenabstände entlang der vertikalen Y-Achse ist entscheidend, um eine saubere Trennung zwischen Kategorieblöcken zu gewährleisten.

1. Vertikale Innengaps und Kategorienabstände

Passen Sie die Abstandsattribute an, um sicherzustellen, dass die Serienbalken ordentlich gruppiert sind, ohne in benachbarte Kategorieguppen zu verschwimmen:

option = {
    grid: {
        left: '20%',
        right: '10%',
        containLabel: true
    },
    legend: {
        data: ['Baseline', 'Optimiert']
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['API-Antwortzeit', 'Datenbankabfrage-Dauer', 'Asset-Ladezeit']
    },
    series: [
        {
            name: 'Baseline',
            type: 'bar',
            barGap: '15%',            // Abstand zwischen Balken innerhalb derselben Kategorie
            barCategoryGap: '40%',    // Abstand zwischen Kategorieguppen
            data: [350, 180, 520]
        },
        {
            name: 'Optimized',
            type: 'bar',
            data: [120, 65, 210]
        }
    ]
};

Strategische Best Practices

• Halten Sie die Gruppen fokussiert:Bleiben Sie bei maximal drei oder vier Serien pro Kategorie. Darüber hinaus sind gestapelte oder mehrfach angeordnete Diagramme besser geeignet, um vertikalen visuellen Überhang zu vermeiden.
• Weisen Sie ausreichenden Y-Achsen-Abstand zu:Gruppierte horizontale Diagramme beanspruchen erhebliche vertikale Höhe. Erhöhen Sie die Höhe des Containers oder passen Sie grid.left an, um Textabkürzungen zu vermeiden.
• Konsistente Reihenfolge der Metriken: Stellen Sie sicher, dass die Reihenfolge der Serien in Ihrem Code der natürlichen Abfolge Ihrer Erzählung entspricht (z. B. historisches Jahr zuerst, aktuelles Jahr zweitens).