Membandingkan metrik sekunder di antara nama kategori yang panjang paling baik ditangani dengan Diagram Batang Kelompok. Dengan menempatkan batang horizontal yang terkait berdampingan sepanjang sumbu Y, tata letak ini memungkinkan pengguna menelusuri metrik kinerja di berbagai kategori tanpa mengorbankan keterbacaan label. Ini menjadi pilihan yang efektif untuk analisis anggaran multi-tahun, perbandingan fitur produk, atau tolok ukur penjualan multi-wilayah di mana label kategori membutuhkan ruang horizontal yang cukup.
Mekanisme Batang Horizontal Kelompok
Seperti kelompok kolom vertikal, kelompok batang horizontal dibuat dengan menetapkan label kategorikal yang identik ke sumbu Y sambil mendefinisikan beberapa seri dengan tipe: 'batang'. Mesin rendering menangani pengelompokan visual secara otomatis, menggeser setiap seri dalam blok kategori sepanjang bidang vertikal.
1. Pengaturan Dasar
Untuk membuat diagram batang kelompok, tetapkan kategori diskret Anda ke yAxis.datanumerikxAxis, dan sertakan beberapa seri batang:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['2025 Dialokasikan', '2026 Dialokasikan']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Penelitian & Pengembangan', 'Pemasaran & Penjualan', 'Dukungan Pelanggan', 'Operasional']
},
series: [
{
name: '2025 Dialokasikan',
type: 'bar',
data: [320, 450, 210, 380]
},
{
name: '2026 Dialokasikan',
type: 'bar',
data: [380, 490, 240, 410]
}
]
};
Teknik Struktural Lanjutan
Memperluas grafik Anda hingga tiga seri atau lebih memberikan wawasan yang lebih kaya, selama kerapatan visual tetap mudah dibaca.
1. Penyempurnaan Gaya Multi-Metrik dengan Gradien Warna Kustom
Terapkan palet warna unik atau isian gradien halus di sepanjang seri horizontal untuk menjaga kelompok yang berbeda tetap mudah dibaca:
option = {
legend: {
data: ['Penjualan Q1', 'Penjualan Q2', 'Penjualan Q3']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Wilayah Utara', 'Wilayah Selatan', 'Wilayah Timur', 'Wilayah Barat']
},
series: [
{
name: 'Penjualan Q1',
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#5470c6',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Penjualan Q2',
type: 'bar',
data: [140, 220, 170, 95],
itemStyle: {
color: '#91cc75',
borderRadius: [0, 4, 4, 0]
}
},
{
name: 'Penjualan Q3',
type: 'bar',
data: [180, 250, 190, 110],
itemStyle: {
color: '#fac858',
borderRadius: [0, 4, 4, 0]
}
}
]
};
Penyesuaian Tata Letak dan Jarak
Mengelola jarak batang sepanjang sumbu Y vertikal adalah kunci untuk menjaga pemisahan yang bersih antar blok kategori.
1. Jarak Dalam Vertikal dan Margas Kategori
Sesuaikan atribut jarak agar batang seri tetap terkelompok rapi tanpa bercampur dengan kelompok kategori tetangga:
option = {
grid: {
left: '20%',
right: '10%',
containLabel: true
},
legend: {
data: ['Baseline', 'Optimized']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Waktu Respons API', 'Durasi Kueri Basis Data', 'Waktu Muat Aset']
},
series: [
{
name: 'Baseline',
type: 'bar',
barGap: '15%', // Ruang antar batang dalam kategori yang sama
barCategoryGap: '40%', // Ruang antar blok kategori
data: [350, 180, 520]
},
{
name: 'Optimized',
type: 'bar',
data: [120, 65, 210]
}
]
};
Praktik Terbaik Strategis
- Pertahankan Fokus Kelompok:Patuhi maksimal 3 atau 4 seri per kategori. Di luar itu, grafik bertumpuk atau multi-panel lebih cocok untuk mencegah kerumitan visual vertikal.
- Alokasikan Margin Y-Axis yang Cukup:Grafik horizontal yang dikelompokkan memakan tinggi vertikal yang signifikan. Tingkatkan tinggi kontainer atau sesuaikan
grid.leftuntuk mencegah pemotongan teks. - Urutan Metrik yang Konsisten:Pastikan urutan seri dalam kode Anda sesuai dengan alur narasi yang alami (misalnya, tahun historis pertama, tahun saat ini kedua).