Al evaluar la descomposición estructural entre métricas discretas, el Gráfico de columnas apiladas ofrece una forma eficiente de visualizar distribuciones parte-todo. A diferencia de los diseños agrupados que extienden las series de datos horizontalmente, los gráficos apilados acumulan valores verticalmente dentro de un único límite de columna. Este formato facilita el monitoreo de el crecimiento total de la categoría mientras se rastrean los cambios en las proporciones de los subcomponentes internos, como el tráfico de dispositivos dividido por sistema operativo o los desgloses de gastos trimestrales entre departamentos.
La mecánica de las columnas apiladas
Los gráficos de columnas apiladas dependen de asignar un identificador de apiladoidentificador a múltiples series. Cuando el motor de renderizado detecta valores idénticos de apiladoen una serie con type: 'bar', apila los valores numéricos secuencialmente a lo largo del eje Y vertical en lugar de representar columnas superpuestas o adyacentes.
1. Configuración esencial
Para crear un gráfico de columnas apiladas básico, define un eje X basado en categorías y aplica una propiedad común apiladoa cada serie en tu seriesmatriz:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
leyenda: {
data: ['Directo', 'Búsqueda orgánica', 'Anuncios pagados', 'Referidos']
},
ejeX: {
type: 'category',
data: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
},
ejeY: {
type: 'value'
},
series: [
{
name: 'Directo',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Búsqueda orgánica',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Anuncios pagados',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Referidos',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Técnicas estructurales avanzadas
Los gráficos de columnas apiladas se pueden adaptar para mostrar distribuciones porcentuales o subgrupos selectivos, según tus requisitos analíticos.
1. Columnas apiladas normalizadas al 100%
Cuando tu objetivo principal es comparar razones de proporción en lugar de totales numéricos absolutos, convierte tus valores de datos en porcentajes normalizados que sumen un 100% por categoría:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
leyenda: {
data: ['Escritorio', 'Móvil', 'Tableta']
},
ejeX: {
tipo: 'categoría',
datos: ['Q1', 'Q2', 'Q3', 'Q4']
},
ejeY: {
tipo: 'valor',
mínimo: 0,
máximo: 100,
etiquetaEje: { formato: '{valor}%' }
},
series: [
{
nombre: 'Escritorio',
tipo: 'barra',
pila: 'porcentaje',
datos: [60, 50, 45, 40]
},
{
nombre: 'Móvil',
tipo: 'barra',
pila: 'porcentaje',
datos: [30, 40, 45, 50]
},
{
nombre: 'Tableta',
tipo: 'barra',
pila: 'porcentaje',
datos: [10, 10, 10, 10]
}
]
};
2. Agrupación múltiple por pila
Puedes combinar agrupación y apilado en una sola vista utilizando identificadores distintospilaidentificadores entre series. Por ejemplo, compara totales reales frente a objetivos, donde cada uno está compuesto por subcomponentes apilados:
option = {
leyenda: {
datos: ['Producto A Real', 'Producto B Real', 'Objetivo Producto A', 'Objetivo Producto B']
},
ejeX: {
tipo: 'categoría',
datos: ['Q1', 'Q2', 'Q3', 'Q4']
},
ejeY: {
tipo: 'valor'
},
series: [
{
nombre: 'Producto A Real',
tipo: 'barra',
pila: 'real',
datos: [120, 150, 180, 200]
},
{
nombre: 'Producto B Real',
tipo: 'barra',
pila: 'real',
datos: [80, 90, 100, 110]
},
{
nombre: 'Objetivo Producto A',
tipo: 'barra',
pila: 'objetivo',
datos: [130, 160, 190, 210]
},
{
nombre: 'Objetivo Producto B',
tipo: 'barra',
pila: 'objetivo',
datos: [90, 100, 110, 120]
}
]
};
Ajuste fino del diseño y estilo
El acabado visual es crucial para las columnas apiladas para asegurar que los segmentos permanezcan distinguibles sin causar fatiga visual.
1. Límites de segmento y tapas redondeadas en la parte superior
Aplica separadores de borde limpios entre los segmentos apilados y limita el redondeo de esquinas solo al segmento superior de la serie en la pila:
option = {
ejeX: {
tipo: 'categoría',
datos: ['Ene', 'Feb', 'Mar', 'Abr']
},
ejeY: {
tipo: 'valor'
},
series: [
{
nombre: 'Capa base',
tipo: 'barra',
pila: 'total',
datos: [320, 302, 301, 334],
estiloElemento: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
nombre: 'Capa media',
tipo: 'barra',
pila: 'total',
datos: [120, 132, 101, 134],
estiloElemento: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
nombre: 'Capa superior',
tipo: 'barra',
pila: 'total',
datos: [220, 182, 191, 234],
estiloElemento: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Esquinas redondeadas solo en el segmento superior
}
}
]
};
Prácticas recomendadas estratégicas
- Limita el número de segmentos:Evita apilar más de 4 a 5 categorías por columna. Más allá de este umbral, comparar segmentos centrales entre columnas se vuelve visualmente desafiante.
- Ancla los elementos de referencia en la parte inferior:Coloca tu métrica más importante o subcomponente más grande como el primer elemento en el
seriesarreglo para que descanse directamente sobre la línea de base para una alineación fácil. - Usa una paleta de alto contraste o bordes:Aplica líneas sutiles de borde blanco entre segmentos para mantener una distinción clara cuando los colores adyacentes tienen niveles de contraste similares.