En el análisis de datos y los informes empresariales, el Gráfico de columnas agrupadas (también conocido como gráfico de columnas agrupadas) es la herramienta principal para comparación lado a lado a través de múltiples dimensiones. Mientras que un gráfico de columnas estándar evalúa una sola métrica por categoría, los gráficos de columnas agrupadas colocan conjuntos de datos relacionados uno al lado del otro dentro del mismo bin de categoría. Esto permite una evaluación visual inmediata de tendencias a lo largo del tiempo, rendimiento entre equipos o rendimiento multi-métrico.
La mecánica de las columnas agrupadas
Los gráficos de columnas agrupadas operan en un sistema de coordenadas compartido donde el eje horizontal representa categorías discretas y el eje vertical maneja valores continuos. El agrupamiento se logra declarando múltiples objetos de series que comparten la misma alineación de categoría en el eje horizontal. El motor de diseño calcula automáticamente el desplazamiento necesario y representa cada serie lado a lado dentro de su bloque de categoría respectivo.
1. Configuración esencial
Para crear un gráfico de columnas agrupadas, define un eje categórico único y proporciona múltiples objetos de series con type: 'bar':
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Ingresos 2025', 'Ingresos 2026']
},
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Ingresos 2025',
type: 'bar',
data: [320, 332, 301, 334]
},
{
name: 'Ingresos 2026',
type: 'bar',
data: [220, 182, 191, 234]
}
]
};
Técnicas estructurales avanzadas
Agregar una tercera o cuarta serie aumenta la densidad del gráfico. Para mantener la claridad, puedes ajustar finamente el estilo de las series, el espaciado del diseño y las pistas visuales.
1. Estilo personalizado entre grupos
Aplicar colores únicos, bordes redondeados o estilos personalizados para los elementos facilita distinguir grupos individuales dentro de gráficos densos:
option = {
legend: {
data: ['Producto A', 'Producto B', 'Producto C']
},
xAxis: {
type: 'category',
data: ['América del Norte', 'Europa', 'Pacífico Asia']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Producto A',
type: 'bar',
data: [150, 230, 224],
itemStyle: {
color: '#5470c6',
borderRadius: [4, 4, 0, 0]
}
},
{
name: 'Producto B',
type: 'bar',
data: [180, 200, 210],
itemStyle: {
color: '#91cc75',
borderRadius: [4, 4, 0, 0]
}
},
{
name: 'Producto C',
type: 'bar',
data: [120, 140, 190],
itemStyle: {
color: '#fac858',
borderRadius: [4, 4, 0, 0]
}
}
]
};
Ajuste fino del diseño y el espaciado
El espaciado es crítico al trabajar con columnas agrupadas. Controlar el espacio entre las columnas del mismo grupo frente al espacio entre grupos de categorías separadas evita el desorden visual.
1. Espacios internos frente a espacios entre categorías
Utiliza atributos de espaciado para equilibrar la densidad del diseño:
barGap: Controla el espacio entre las columnas dentro del mismo grupo de categorías (por ejemplo,'20%'o'0%'para columnas adyacentes).barCategoryGap: Controla el espacio entre diferentes grupos de categorías (por ejemplo,'40%').barWidth: Controla el ancho de la columna en relación con el espacio de categoría.
option = {
leyenda: {
datos: ['Planeado', 'Real']
},
ejeX: {
tipo: 'categoría',
datos: ['Ene', 'Feb', 'Mar', 'Abr', 'May']
},
ejeY: {
tipo: 'valor'
},
series: [
{
nombre: 'Planeado',
tipo: 'barra',
datos: [100, 120, 140, 160, 180],
barGap: '10%',
barCategoryGap: '35%'
},
{
nombre: 'Real',
tipo: 'barra',
datos: [95, 125, 130, 170, 175]
}
]
};
Prácticas Estratégicas Mejores
- Límite de cantidad de grupos:Evite colocar más de 3 a 4 columnas en un solo grupo. Demasiadas columnas por categoría hacen que la gráfica sea difícil de revisar.
- Incluya siempre una leyenda: Debido a que las gráficas agrupadas usan color para diferenciar variables, una leyenda clara en la parte superior o inferior es obligatoria para el contexto.
- Orden de grupo consistente: Mantenga la secuencia de series consistente en cada categoría (por ejemplo, coloque siempre “2025” antes que “2026”).