{"id":2075,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/pl\/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\/pl\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Wykres s\u0142upkowy skupiony: dane wieloseryjne i odst\u0119py"},"content":{"rendered":"

W analizie danych i raportowaniu biznesowym Wykres s\u0142upkowy skupiony<\/strong> (znany r\u00f3wnie\u017c jako wykres s\u0142upkowy skupiony) jest podstawowym narz\u0119dziem do por\u00f3wnania obok siebie w wielu wymiarach. Podczas gdy standardowy wykres s\u0142upkowy ocenia jedn\u0105 miar\u0119 na kategori\u0119, wykresy s\u0142upkowe skupione umieszczaj\u0105 powi\u0105zane zestawy danych obok siebie w tym samym przedziale kategorii. Pozwala to na natychmiastow\u0105 wizualn\u0105 ocen\u0119 trend\u00f3w w czasie, wydajno\u015bci mi\u0119dzy zespo\u0142ami lub wydajno\u015bci wielomiarowej<\/em>.<\/p>\n

Zasada dzia\u0142ania wykres\u00f3w s\u0142upkowych skupionych<\/h2>\n

Wykresy s\u0142upkowe skupione dzia\u0142aj\u0105 w wsp\u00f3lnej uk\u0142adzie wsp\u00f3\u0142rz\u0119dnych, gdzie o\u015b pozioma reprezentuje dyskretne kategorie, a o\u015b pionowa obs\u0142uguje warto\u015bci ci\u0105g\u0142e. Grupowanie osi\u0105gane jest przez zadeklarowanie wielu obiekt\u00f3w serii, kt\u00f3re maj\u0105 dok\u0142adnie tak\u0105 sam\u0105 wyznaczon\u0105 pozycj\u0119 kategorii na osi poziomej. Silnik uk\u0142adu automatycznie oblicza wymagane przesuni\u0119cie i renderuje ka\u017cd\u0105 seri\u0119 obok siebie w odpowiednim bloku kategorii.<\/p>\n

1. Podstawowa konfiguracja<\/h3>\n

Aby stworzy\u0107 wykres s\u0142upkowy skupiony, zdefiniuj jedn\u0105 o\u015b kategoryczn\u0105 i podaj wiele obiekt\u00f3w serii z type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w VPasCode<\/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: ['Przych\u00f3d 2025', 'Przych\u00f3d 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: 'Przych\u00f3d 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Przych\u00f3d 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>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Zaawansowane techniki strukturalne<\/h2>\n
Dodanie trzeciej lub czwartej serii zwi\u0119ksza g\u0119sto\u015b\u0107 wykresu. Aby zachowa\u0107 czytelno\u015b\u0107, mo\u017cesz dopasowa\u0107 styl serii, odst\u0119py uk\u0142adu i wskaz\u00f3wki wizualne.<\/p>\n
1. Dostosowanie stylu mi\u0119dzy grupami<\/h3>\n
Stosowanie unikalnych kolor\u00f3w, zaokr\u0105glonych naro\u017cnik\u00f3w lub niestandardowych styl\u00f3w element\u00f3w u\u0142atwia odr\u00f3\u017cnienie poszczeg\u00f3lnych grup w g\u0119stych wykresach:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdytuj ECharts w VPasCode<\/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: ['Ameryka P\u00f3\u0142nocna', 'Europa', 'Azja Pacyfik']\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>
\nEdytuj ECharts w VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Dok\u0142adne dopasowanie uk\u0142adu i odst\u0119p\u00f3w<\/h2>\n
Odst\u0119py s\u0105 kluczowe podczas pracy z wykresami s\u0142upkowymi skupionymi. Kontrolowanie odst\u0119pu mi\u0119dzy s\u0142upkami w tej samej grupie w por\u00f3wnaniu do odst\u0119pu mi\u0119dzy r\u00f3\u017cnymi grupami kategorii zapobiega zgie\u0142kowi wizualnemu.<\/p>\n
1. Odst\u0119py wewn\u0119trzne w por\u00f3wnaniu do odst\u0119p\u00f3w kategorii<\/h3>\n
U\u017cyj atrybut\u00f3w odst\u0119p\u00f3w, aby zr\u00f3wnowa\u017cy\u0107 g\u0119sto\u015b\u0107 uk\u0142adu:<\/p>\n