Diagram Batang: Tata Letak Horizontal dan Optimalisasi Label

Horizontal Diagram Batang sangat ideal untuk menampilkan data peringkat, nama kategori yang panjang, atau metrik kemajuan. Dengan memperpanjang batang sepanjang sumbu X, struktur visual ini memberi label kategori ruang horizontal yang cukup, menghilangkan kebutuhan untuk miringkan atau memotong teks. Baik Anda sedang membuat tabel peringkat 10 besar, analisis respons survei, atau perbandingan kinerja horizontal, diagram batang memberikan keterbacaan yang bersih di berbagai layar desktop maupun mobile.

Mekanisme Batang Horizontal

Dalam Apache ECharts, diagram kolom dan diagram batang menggunakan jenis seri yang persis sama 'bar' jenis seri. Transisi ke tata letak horizontal terjadi dengan menetapkan data kategori langsung ke sumbu vertikal (yAxis) dan menentukan sumbu horizontal (xAxis) sebagai sumbu nilai numerik. Mesin grafik memutar arah rendering, menggambar batang secara horizontal dari kiri ke kanan.

1. Pengaturan Dasar

Untuk membuat diagram batang horizontal dasar, atur type: 'category' pada yAxis dan berikan array data Anda, sementara mengatur type: 'value' pada xAxis:

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
    },
    series: [
        {
            type: 'bar',
            data: [214, 273, 331, 1380, 1411]
        }
    ]
};

Teknik Struktural Lanjutan

Diagram batang horizontal mendukung beberapa kelompok data, penyorotan terarah, dan penanganan sudut khusus untuk desain dashboard modern.

1. Perbandingan Horizontal Multi-Seri

Tempatkan beberapa objek di dalam seri array untuk membuat batang horizontal kelompok per label kategori:

option = {
    legenda: {
        data: ['Target 2025', 'Realisasi 2025']
    },
    sumbuX: {
        jenis: 'nilai'
    },
    sumbuY: {
        jenis: 'kategori',
        data: ['Proyek A', 'Proyek B', 'Proyek C', 'Proyek D']
    },
    seri: [
        {
            nama: 'Target 2025',
            jenis: 'batang',
            data: [80, 95, 70, 85]
        },
        {
            nama: 'Realisasi 2025',
            jenis: 'batang',
            data: [85, 90, 75, 92]
        }
    ]
};

2. Ujung Bulat dan Gaya Penyorotan

Terapkan sudut kanan bulat menggunakan borderRadius pada batang horizontal (menentukan [kanan-atas, kanan-bawah, kiri-bawah, kiri-atas]):

option = {
    sumbuX: {
        jenis: 'nilai'
    },
    sumbuY: {
        jenis: 'kategori',
        data: ['Pencarian Langsung', 'Kampanye Email', 'Media Sosial', 'Pencarian Berbayar']
    },
    seri: [
        {
            jenis: 'batang',
            data: [
                120,
                200,
                {
                    nilai: 450,
                    gayaItem: {
                        warna: '#fac858'
                    }
                },
                280
            ],
            gayaItem: {
                warna: '#91cc75',
                borderRadius: [0, 6, 6, 0] // Bulatkan hanya ujung kanan
            }
        }
    ]
};

Penyesuaian Tata Letak dan Jarak

Karena label kategori horizontal bervariasi panjang teksnya, menyesuaikan margin kiri dan penjajaran label mencegah pemotongan label.

1. Margin Grid Kontainer

Gunakan gridblok konfigurasi untuk mengalokasikan ruang cukup untuk label sumbu Y yang panjang:

option = {
    grid: {
        kiri: '15%',  // Tingkatkan margin kiri untuk teks kategori panjang
        kanan: '8%',
        bawah: '10%',
        mengandungLabel: true
    },
    sumbuX: {
        jenis: 'nilai'
    },
    sumbuY: {
        jenis: 'kategori',
        data: [
            'Modernisasi Infrastruktur Perusahaan',
            'Migrasi Cloud Tahap 2',
            'Optimasi Basis Data',
            'Desain Ulang Gateway API'
        ]
    },
    seri: [
        {
            jenis: 'batang',
            data: [75, 60, 90, 40],
            lebarBatang: '50%'
        }
    ]
};

Praktik Terbaik Strategis

• Urutkan Data Secara Sengaja:Atur batang horizontal dalam urutan naik atau turun kapan pun memungkinkan. Daftar yang diurutkan membuat kinerja terbaik langsung jelas bagi pembaca.
• Gunakan containLabel: true: Selalu sertakan containLabel: true di dalam grid konfigurasi untuk mencegah judul kategori panjang tumpah dari tepi kanvas.
• Label Nilai Langsung: Untuk papan peringkat yang bersih, pertimbangkan menampilkan nilai data langsung di ujung setiap batang menggunakan label: { show: true, position: 'right' } dan menyembunyikan sumbu bawah numerik sepenuhnya.