Wykres słupkowy skupiony: dane wieloseryjne i odstępy

W analizie danych i raportowaniu biznesowym Wykres słupkowy skupiony (znany również jako wykres słupkowy skupiony) jest podstawowym narzędziem do porównania obok siebie w wielu wymiarach. Podczas gdy standardowy wykres słupkowy ocenia jedną miarę na kategorię, wykresy słupkowe skupione umieszczają powiązane zestawy danych obok siebie w tym samym przedziale kategorii. Pozwala to na natychmiastową wizualną ocenę trendów w czasie, wydajności między zespołami lub wydajności wielomiarowej.

Zasada działania wykresów słupkowych skupionych

Wykresy słupkowe skupione działają w wspólnej układzie współrzędnych, gdzie oś pozioma reprezentuje dyskretne kategorie, a oś pionowa obsługuje wartości ciągłe. Grupowanie osiągane jest przez zadeklarowanie wielu obiektów serii, które mają dokładnie taką samą wyznaczoną pozycję kategorii na osi poziomej. Silnik układu automatycznie oblicza wymagane przesunięcie i renderuje każdą serię obok siebie w odpowiednim bloku kategorii.

1. Podstawowa konfiguracja

Aby stworzyć wykres słupkowy skupiony, zdefiniuj jedną oś kategoryczną i podaj wiele obiektów serii z type: 'bar':

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

Zaawansowane techniki strukturalne

Dodanie trzeciej lub czwartej serii zwiększa gęstość wykresu. Aby zachować czytelność, możesz dopasować styl serii, odstępy układu i wskazówki wizualne.

1. Dostosowanie stylu między grupami

Stosowanie unikalnych kolorów, zaokrąglonych narożników lub niestandardowych stylów elementów ułatwia odróżnienie poszczególnych grup w gęstych wykresach:

option = {
    legend: {
        data: ['Produkt A', 'Produkt B', 'Produkt C']
    },
    xAxis: {
        type: 'category',
        data: ['Ameryka Północna', 'Europa', 'Azja Pacyfik']
    },
    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]
            }
        }
    ]
};

Dokładne dopasowanie układu i odstępów

Odstępy są kluczowe podczas pracy z wykresami słupkowymi skupionymi. Kontrolowanie odstępu między słupkami w tej samej grupie w porównaniu do odstępu między różnymi grupami kategorii zapobiega zgiełkowi wizualnemu.

1. Odstępy wewnętrzne w porównaniu do odstępów kategorii

Użyj atrybutów odstępów, aby zrównoważyć gęstość układu:

• barGap: Kontroluje odstęp między słupkami w ramach tej samej grupy kategorii (np. '20%' lub '0%' dla kolumn stykających się).
• barCategoryGap: Kontroluje odstęp między różnymi grupami kategorii (np. '40%').
• barWidth: Kontroluje szerokość kolumn względem przestrzeni kategorii.

option = {
    legend: {
        data: ['Zaplanowane', 'Faktyczne']
    },
    xAxis: {
        type: 'category',
        data: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Zaplanowane',
            type: 'bar',
            data: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            name: 'Faktyczne',
            type: 'bar',
            data: [95, 125, 130, 170, 175]
        }
    ]
};

Strategiczne najlepsze praktyki

• Ogranicz liczbę grup: Unikaj umieszczania więcej niż 3–4 kolumn w jednej grupie. Zbyt wiele kolumn na kategorię utrudnia przeglądanie wykresu.
• Zawsze dodawaj legendę: Ponieważ wykresy grupowane wykorzystują kolory do odróżniania zmiennych, jasna legenda z góry lub z dołu jest obowiązkowa w celu zapewnienia kontekstu.
• Spójna kolejność grup: Zachowaj stałą kolejność szeregów we wszystkich kategoriach (np. zawsze umieszczaj „2025” przed „2026”).