Untuk menganalisis pemecahan komponen di antara item dengan judul kategori yang panjang, Diagram Batang Tumpuk adalah pilihan ideal. Dengan menumpuk segmen data secara horizontal dari kiri ke kanan sepanjang sumbu Y, visualisasi ini mempertahankan kejelasan label panjang sambil menampilkan baik total kategori keseluruhan maupun pemecahan proporsional internal. Ini bekerja sangat baik untuk hasil demografi survei, alokasi sumber daya proyek berdasarkan departemen, atau saluran konversi multi-channel.
Mekanisme Batang Tumpuk Horizontal
Membuat diagram tumpuk horizontal melibatkan penggunaan tumpuk properti seperti diagram batang tumpuk, dipasangkan dengan sumbu Y berbasis kategori. Ketika beberapa type: 'bar' seri berbagi kunci tumpuk yang sama pada orientasi horizontal, mesin rendering mengakumulasi nilai dari kiri ke kanan sepanjang sumbu X.
1. Pengaturan Dasar
Untuk membuat diagram batang tumpuk dasar, atur yAxis menjadi type: 'category', xAxis menjadi type: 'value', dan berikan kunci yang sesuai tumpuk string ke setiap seri:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Teknik', 'Produk', 'Desain', 'Pemasaran']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Proyek Alpha', 'Proyek Beta', 'Proyek Gamma', 'Proyek Delta']
},
series: [
{
name: 'Teknik',
type: 'bar',
stack: 'alokasi',
data: [320, 302, 301, 334]
},
{
name: 'Produk',
type: 'bar',
stack: 'alokasi',
data: [120, 132, 101, 134]
},
{
name: 'Desain',
type: 'bar',
stack: 'alokasi',
data: [220, 182, 191, 234]
},
{
name: 'Pemasaran',
type: 'bar',
stack: 'alokasi',
data: [150, 212, 201, 154]
}
]
};
Teknik Struktural Lanjutan
Batang horizontal yang ditumpuk dapat dikonfigurasi untuk perbandingan volume absolut atau dinormalisasi untuk menampilkan rasio persentase di antara kategori.
1. Grafik Batang Horizontal yang Dinormalisasi 100%
Untuk mengevaluasi rasio relatif daripada jumlah absolut di antara kategori panjang, normalisasi data seri Anda agar berjumlah 100% per baris:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Puas', 'Netral', 'Tidak Puas']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Keberhasilan Pelanggan Enterprise',
'Layanan Dukungan Pasar Menengah',
'Onboarding Mandiri'
]
},
series: [
{
name: 'Puas',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Netral',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Tidak Puas',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Penyesuaian Halus Tata Letak dan Gaya
Batas visual yang bersih dan ujung luar yang melengkung memberikan tampilan yang halus dan modern pada batang tumpuk horizontal.
1. Pemisahan Segmen dan Pembulatan Ujung Luar
Terapkan garis batas vertikal tipis untuk membedakan segmen dalam, dan batasi gaya radius sudut hanya pada segmen terakhir di sisi kanan:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Anggaran Q1', 'Anggaran Q2', 'Anggaran Q3', 'Anggaran Q4']
},
series: [
{
name: 'Biaya Tetap',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Biaya Variabel',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Discretionary',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Sudut melengkung pada ujung kanan
}
}
]
};
Praktik Terbaik Strategis
- Basis Segmen Pertama:Segmen yang paling dekat dengan basis sumbu Y adalah yang paling mudah dibandingkan di antara kategori. Selalu letakkan komponen paling penting sebagai objek seri pertama.
- Batasi Komponen Tumpuk:Pertahankan jumlah total segmen tumpuk menjadi 5 atau kurang per batang untuk menjaga analisis visual yang jelas tanpa membebani pemirsa.
- Label Teks Dalam Batang: Untuk batang tumpuk horizontal dengan segmen lebar, pertimbangkan untuk mengaktifkan
label: { show: true, position: 'inside' }untuk membuat nilai segmen individu mudah dibaca tanpa bergantung pada tooltip saat diarahkan.