{"id":2076,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/grouped-column-chart-multi-series-data-and-spacing-guide\/"},"modified":"2026-07-24T09:24:14","modified_gmt":"2026-07-24T09:24:14","slug":"grouped-column-chart-multi-series-data-and-spacing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Gruppiertes S\u00e4ulendiagramm: Mehrreihige Daten und Abst\u00e4nde"},"content":{"rendered":"

Bei der Datenanalyse und Gesch\u00e4ftsdarstellung ist das Gruppierte S\u00e4ulendiagramm<\/strong> (auch als gruppiertes S\u00e4ulendiagramm bekannt) ist das prim\u00e4re Werkzeug f\u00fcr die vergleichende Darstellung \u00fcber mehrere Dimensionen. W\u00e4hrend ein Standard-S\u00e4ulendiagramm pro Kategorie eine einzelne Metrik bewertet, platziert ein gruppiertes S\u00e4ulendiagramm verwandte Datens\u00e4tze nebeneinander innerhalb desselben Kategorie-Bins. Dadurch wird eine sofortige visuelle Bewertung von Trends \u00fcber die Zeit, Leistung \u00fcber Teams oder mehrdimensionale Leistung<\/em>.<\/p>\n

Die Funktionsweise gruppiertes S\u00e4ulendiagramm<\/h2>\n

Gruppierte S\u00e4ulendiagramme 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.<\/p>\n

1. Grundlegende Einrichtung<\/h3>\n

Um ein gruppiertes S\u00e4ulendiagramm zu erstellen, definieren Sie eine einzelne kategoriale Achse und geben Sie mehrere Serienobjekte mit type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    legend: {\r\n        data: ['Umsatz 2025', 'Umsatz 2026']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Q1', 'Q2', 'Q3', 'Q4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Umsatz 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Umsatz 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Fortgeschrittene strukturelle Techniken<\/h2>\n
Durch Hinzuf\u00fcgen einer dritten oder vierten Serie erh\u00f6ht sich die Dichte des Diagramms. Um Klarheit zu bewahren, k\u00f6nnen Sie die Serien-Stilisierung, Layout-Abst\u00e4nde und visuelle Hinweise feinjustieren.<\/p>\n
1. Benutzerdefinierte Stilisierung \u00fcber Gruppen hinweg<\/h3>\n
Durch Anwendung einzigartiger Farben, abgerundeter Ecken oder benutzerdefinierter Elementstile wird es einfach, einzelne Gruppen innerhalb dichter Diagramme zu unterscheiden:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    legend: {\r\n        data: ['Produkt A', 'Produkt B', 'Produkt C']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Nordamerika', 'Europa', 'Asien-Pazifik']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Produkt A',\r\n            type: 'bar',\r\n            data: [150, 230, 224],\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produkt B',\r\n            type: 'bar',\r\n            data: [180, 200, 210],\r\n            itemStyle: {\r\n                color: '#91cc75',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produkt C',\r\n            type: 'bar',\r\n            data: [120, 140, 190],\r\n            itemStyle: {\r\n                color: '#fac858',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nECharts in VPasCode bearbeiten<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Feinabstimmung von Layout und Abst\u00e4nden<\/h2>\n
Die Abst\u00e4nde sind entscheidend bei der Arbeit mit gruppierten S\u00e4ulen. Die Kontrolle des Abstands zwischen S\u00e4ulen innerhalb derselben Gruppe im Vergleich zum Abstand zwischen getrennten Kategorieguppen verhindert visuelle \u00dcberlastung.<\/p>\n
1. Innere Abst\u00e4nde im Vergleich zu Kategorien-Abst\u00e4nden<\/h3>\n
Verwenden Sie Abstandsattribute, um die Layout-Dichte auszugleichen:<\/p>\n