Trong phân tích dữ liệu và báo cáo kinh doanh, Biểu đồ cột nhóm (cũng được gọi là Biểu đồ cột nhóm) là công cụ chính để so sánh song song qua nhiều chiều. Trong khi biểu đồ cột tiêu chuẩn đánh giá một chỉ số duy nhất cho mỗi danh mục, biểu đồ cột nhóm đặt các tập dữ liệu liên quan cạnh nhau trong cùng một nhóm danh mục. Điều này cho phép đánh giá trực quan tức thì về xu hướng theo thời gian, hiệu suất giữa các đội nhóm, hoặc hiệu suất đa chỉ số.
Cơ chế của các cột nhóm
Biểu đồ cột nhóm hoạt động trên một hệ tọa độ chung, trong đó trục hoành đại diện cho các danh mục rời rạc và trục tung xử lý các giá trị liên tục. Việc nhóm được thực hiện bằng cách khai báo nhiều đối tượng chuỗi chia sẻ cùng một sự sắp xếp danh mục chính xác trên trục hoành. Bộ xử lý bố cục sẽ tự động tính toán độ lệch cần thiết và hiển thị từng chuỗi cạnh nhau trong khối danh mục tương ứng.
1. Cài đặt cơ bản
Để xây dựng biểu đồ cột nhóm, hãy xác định một trục phân loại duy nhất và cung cấp nhiều đối tượng chuỗi với type: 'bar':
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Doanh thu 2025', 'Doanh thu 2026']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Doanh thu 2025',
type: 'bar',
data: [320, 332, 301, 334]
},
{
name: 'Doanh thu 2026',
type: 'bar',
data: [220, 182, 191, 234]
}
]
};
Các kỹ thuật cấu trúc nâng cao
Việc thêm chuỗi thứ ba hoặc thứ tư sẽ làm tăng độ đậm đặc của biểu đồ. Để duy trì sự rõ ràng, bạn có thể điều chỉnh tinh tế kiểu dáng chuỗi, khoảng cách bố cục và các dấu hiệu thị giác.
1. Định dạng tùy chỉnh giữa các nhóm
Áp dụng màu sắc riêng biệt, góc bo tròn hoặc kiểu dáng mục tùy chỉnh giúp dễ dàng phân biệt các nhóm riêng lẻ trong các biểu đồ dày đặc:
option = {
legend: {
data: ['Sản phẩm A', 'Sản phẩm B', 'Sản phẩm C']
},
xAxis: {
type: 'category',
data: ['Bắc Mỹ', 'Châu Âu', 'Châu Á Thái Bình Dương']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Sản phẩm A',
type: 'bar',
data: [150, 230, 224],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
},
{
name: 'Sản phẩm B',
type: 'bar',
data: [180, 200, 210],
itemStyle: {
color: '#91cc75',
borderRadius: [4, 4, 0, 0]
}
},
{
name: 'Sản phẩm C',
type: 'bar',
data: [120, 140, 190],
itemStyle: {
color: '#fac858',
borderRadius: [4, 4, 0, 0]
}
}
]
};
Tinh chỉnh bố cục và khoảng cách
Khoảng cách là yếu tố then chốt khi làm việc với các cột nhóm. Kiểm soát khoảng cách giữa các cột trong cùng một nhóm so với khoảng cách giữa các nhóm danh mục riêng biệt giúp ngăn ngừa sự lộn xộn thị giác.
1. Khoảng cách nội bộ so với khoảng cách danh mục
Sử dụng các thuộc tính khoảng cách để cân bằng độ đậm đặc bố cục:
barGap: Kiểm soát khoảng cách giữa các cột trong cùng một nhóm danh mục (ví dụ như'20%'hoặc'0%'cho các cột tiếp giáp).barCategoryGap: Điều khiển khoảng cách giữa các nhóm danh mục khác nhau (ví dụ như'40%').barWidth: Điều khiển độ rộng cột tương đối với khoảng cách danh mục.
option = {
legend: {
data: ['Đã lên kế hoạch', 'Thực tế']
},
xAxis: {
type: 'category',
data: ['Thg1', 'Thg2', 'Thg3', 'Thg4', 'Thg5']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Đã lên kế hoạch',
type: 'bar',
data: [100, 120, 140, 160, 180],
barGap: '10%',
barCategoryGap: '35%'
},
{
name: 'Thực tế',
type: 'bar',
data: [95, 125, 130, 170, 175]
}
]
};
Các Thực hành Tối ưu Chiến lược
- Giới hạn số lượng nhóm: Tránh đặt quá 3 đến 4 cột trong một nhóm duy nhất. Quá nhiều cột cho mỗi danh mục sẽ khiến biểu đồ khó quan sát.
- Luôn bao gồm chú thích: Vì biểu đồ nhóm sử dụng màu sắc để phân biệt các biến, nên chú thích rõ ràng ở trên hoặc dưới là bắt buộc để cung cấp ngữ cảnh.
- Thứ tự nhóm nhất quán: Giữ thứ tự các chuỗi nhất quán trên mọi danh mục (ví dụ: luôn đặt “2025” trước “2026”).