Diagram Batang Kelompok: Data Multi-Seri dan Spasi

Dalam analisis data dan pelaporan bisnis, Diagram Batang Kelompok (juga dikenal sebagai Diagram Batang Kelompok) adalah alat utama untuk perbandingan berdampingan di berbagai dimensi. Sementara diagram batang standar menilai satu metrik per kategori, diagram batang kelompok menempatkan dataset yang terkait satu sama lain di dalam kotak kategori yang sama. Ini memungkinkan evaluasi visual langsung terhadap tren sepanjang waktu, kinerja antar tim, atau kinerja multi-metrik.

Mekanisme Batang Kelompok

Diagram batang kelompok beroperasi pada sistem koordinat bersama di mana sumbu horizontal mewakili kategori diskrit dan sumbu vertikal menangani nilai kontinu. Pengelompokan dicapai dengan mendeklarasikan beberapa objek seri yang memiliki penyesuaian kategori yang persis sama pada sumbu horizontal. Mesin tata letak secara otomatis menghitung offset yang diperlukan dan menampilkan setiap seri berdampingan dalam blok kategori masing-masing.

1. Pengaturan Dasar

Untuk membuat diagram batang kelompok, tentukan satu sumbu kategorikal dan sediakan beberapa objek seri dengan type: 'bar':

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    legend: {
        data: ['Pendapatan 2025', 'Pendapatan 2026']
    },
    xAxis: {
        type: 'category',
        data: ['K1', 'K2', 'K3', 'K4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Pendapatan 2025',
            type: 'bar',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Pendapatan 2026',
            type: 'bar',
            data: [220, 182, 191, 234]
        }
    ]
};

Teknik Struktural Lanjutan

Menambahkan seri ketiga atau keempat meningkatkan kepadatan diagram. Untuk menjaga kejelasan, Anda dapat menyesuaikan gaya seri, jarak tata letak, dan petunjuk visual.

1. Gaya Kustom di Seluruh Kelompok

Menerapkan warna unik, sudut membulat, atau gaya item kustom memudahkan pemisahan kelompok individu dalam diagram yang padat:

option = {
    legend: {
        data: ['Produk A', 'Produk B', 'Produk C']
    },
    xAxis: {
        type: 'category',
        data: ['Amerika Utara', 'Eropa', 'Asia Pasifik']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Produk A',
            type: 'bar',
            data: [150, 230, 224],
            itemStyle: {
                color: '#5470c6',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produk B',
            type: 'bar',
            data: [180, 200, 210],
            itemStyle: {
                color: '#91cc75',
                borderRadius: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produk C',
            type: 'bar',
            data: [120, 140, 190],
            itemStyle: {
                color: '#fac858',
                borderRadius: [4, 4, 0, 0]
            }
        }
    ]
};

Penyesuaian Halus Tata Letak dan Spasi

Spasi sangat penting saat bekerja dengan batang kelompok. Mengendalikan jarak antar batang dalam kelompok yang sama dibandingkan dengan jarak antar kelompok kategori yang terpisah mencegah kerumitan visual.

1. Jarak Dalam vs. Jarak Kategori

Gunakan atribut spasi untuk menyeimbangkan kepadatan tata letak:

• barGap: Mengontrol ruang antar batang dalam kelompok kategori yang sama (misalnya, '20%' atau '0%' untuk kolom yang saling bersentuhan).
• barCategoryGap: Mengontrol ruang antara kelompok kategori yang berbeda (misalnya, '40%').
• barWidth: Mengontrol lebar kolom relatif terhadap ruang kategori.

option = {
    legend: {
        data: ['Rencana', 'Aktual']
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Rencana',
            type: 'bar',
            data: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            name: 'Aktual',
            type: 'bar',
            data: [95, 125, 130, 170, 175]
        }
    ]
};

Praktik Terbaik Strategis

• Batas Jumlah Kelompok: Hindari menempatkan lebih dari 3 hingga 4 kolom dalam satu kelompok. Terlalu banyak kolom per kategori membuat grafik sulit dibaca.
• Selalu Sertakan Legenda: Karena grafik yang dikelompokkan menggunakan warna untuk membedakan variabel, legenda yang jelas di bagian atas atau bawah wajib disertakan untuk konteks.
• Urutan Kelompok yang Konsisten: Pertahankan urutan seri yang konsisten di setiap kategori (misalnya, selalu letakkan ‘2025’ sebelum ‘2026’).