Ketika mengevaluasi pemecahan struktural di seluruh metrik diskret, Diagram Kolom Tumpuk menawarkan cara efisien untuk memvisualisasikan distribusi bagian-ke-seluruh. Berbeda dengan tata letak kelompok yang menyebar data secara horizontal, diagram tumpuk mengakumulasi nilai secara vertikal dalam batas kolom tunggal. Format ini membuatnya mudah untuk memantau pertumbuhan kategori total sambil melacak perubahan proporsi komponen internal yang berubah, seperti lalu lintas perangkat yang dibagi berdasarkan sistem operasi atau rincian pengeluaran kuartalan di seluruh departemen.
Mekanisme Kolom Tumpuk
Diagram kolom tumpuk bergantung pada penugasan identifikasi tumpukidentifikasi di seluruh beberapa seri. Ketika mesin rendering mendeteksi nilai string tumpukyang sama pada seri dengan tipe: 'bar', maka akan menumpuk nilai numerik secara berurutan sepanjang sumbu Y vertikal, bukan menggambar kolom yang tumpang tindih atau berdampingan.
1. Pengaturan Dasar
Untuk membuat diagram kolom tumpuk dasar, tentukan sumbu X berbasis kategori dan terapkan properti tumpukke setiap seri dalam array seriarray:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Langsung', 'Pencarian Organik', 'Iklan Berbayar', 'Rujukan']
},
xAxis: {
type: 'category',
data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Langsung',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Pencarian Organik',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Iklan Berbayar',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Rujukan',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Teknik Struktural Lanjutan
Diagram kolom tumpuk dapat disesuaikan untuk menampilkan distribusi persentase atau pengelompokan sub-grup tertentu tergantung pada kebutuhan analitis Anda.
1. Kolom Tumpuk yang Dinormalisasi 100%
Ketika tujuan utama Anda adalah membandingkan rasio proporsi daripada jumlah numerik absolut, ubah nilai data Anda menjadi persentase yang dinormalisasi yang berjumlah 100% per kategori:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Desktop', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Desktop',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Mobile',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Tablet',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Pengelompokan Multi-Tumpuk
Anda dapat menggabungkan pengelompokan dan penumpukan dalam satu tampilan dengan menggunakan tumpukidentifikasi yang berbeda di seluruh seri. Sebagai contoh, bandingkan total aktual vs. target, di mana masing-masing terdiri dari komponen bawah yang ditumpuk:
option = {
legend: {
data: ['Produk A Aktual', 'Produk B Aktual', 'Produk A Target', 'Produk B Target']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produk A Aktual',
type: 'bar',
stack: 'aktual',
data: [120, 150, 180, 200]
},
{
name: 'Produk B Aktual',
type: 'bar',
stack: 'aktual',
data: [80, 90, 100, 110]
},
{
name: 'Produk A Target',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: 'Produk B Target',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
Penyesuaian Layout dan Gaya
Kemulusan visual sangat penting untuk kolom yang ditumpuk agar segmen tetap dapat dibedakan tanpa menyebabkan kelelahan visual.
1. Batas Segmen dan Ujung Atas yang Melengkung
Terapkan pemisah batas yang bersih di antara segmen yang ditumpuk dan batasi pembulatan sudut hanya pada segmen seri teratas dalam tumpukan:
option = {
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Lapisan Dasar',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Lapisan Tengah',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Lapisan Atas',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Sudut melengkung hanya pada segmen atas
}
}
]
};
Praktik Terbaik Strategis
- Batasi Jumlah Segmen: Hindari menumpuk lebih dari 4 hingga 5 kategori per kolom. Di atas ambang batas ini, membandingkan segmen tengah di antar kolom menjadi secara visual sulit.
- Tetapkan Item Dasar di Bagian Bawah: Tempatkan metrik paling penting atau komponen bawah terbesar sebagai item pertama dalam
seriesarray sehingga berada langsung di atas garis dasar untuk memudahkan penyesuaian. - Gunakan Palet Kontras Tinggi atau Batas: Terapkan garis batas putih halus di antara segmen untuk menjaga perbedaan yang jelas ketika warna yang bersebelahan memiliki tingkat kontras yang serupa.