{"id":2074,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/grouped-column-chart-multi-series-data-and-spacing-guide\/"},"modified":"2026-07-24T09:24:14","modified_gmt":"2026-07-24T09:24:14","slug":"grouped-column-chart-multi-series-data-and-spacing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Diagram Batang Kelompok: Data Multi-Seri dan Spasi"},"content":{"rendered":"

Dalam analisis data dan pelaporan bisnis, Diagram Batang Kelompok<\/strong> (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<\/em>.<\/p>\n

Mekanisme Batang Kelompok<\/h2>\n

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.<\/p>\n

1. Pengaturan Dasar<\/h3>\n

Untuk membuat diagram batang kelompok, tentukan satu sumbu kategorikal dan sediakan beberapa objek seri dengan type: 'bar'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'shadow' }\r\n    },\r\n    legend: {\r\n        data: ['Pendapatan 2025', 'Pendapatan 2026']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['K1', 'K2', 'K3', 'K4']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Pendapatan 2025',\r\n            type: 'bar',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Pendapatan 2026',\r\n            type: 'bar',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Teknik Struktural Lanjutan<\/h2>\n
Menambahkan seri ketiga atau keempat meningkatkan kepadatan diagram. Untuk menjaga kejelasan, Anda dapat menyesuaikan gaya seri, jarak tata letak, dan petunjuk visual.<\/p>\n
1. Gaya Kustom di Seluruh Kelompok<\/h3>\n
Menerapkan warna unik, sudut membulat, atau gaya item kustom memudahkan pemisahan kelompok individu dalam diagram yang padat:<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    legend: {\r\n        data: ['Produk A', 'Produk B', 'Produk C']\r\n    },\r\n    xAxis: {\r\n        type: 'category',\r\n        data: ['Amerika Utara', 'Eropa', 'Asia Pasifik']\r\n    },\r\n    yAxis: {\r\n        type: 'value'\r\n    },\r\n    series: [\r\n        {\r\n            name: 'Produk A',\r\n            type: 'bar',\r\n            data: [150, 230, 224],\r\n            itemStyle: {\r\n                color: '#5470c6',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produk B',\r\n            type: 'bar',\r\n            data: [180, 200, 210],\r\n            itemStyle: {\r\n                color: '#91cc75',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produk C',\r\n            type: 'bar',\r\n            data: [120, 140, 190],\r\n            itemStyle: {\r\n                color: '#fac858',\r\n                borderRadius: [4, 4, 0, 0]\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit ECharts di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Penyesuaian Halus Tata Letak dan Spasi<\/h2>\n
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.<\/p>\n
1. Jarak Dalam vs. Jarak Kategori<\/h3>\n
Gunakan atribut spasi untuk menyeimbangkan kepadatan tata letak:<\/p>\n