Para analizar desgloses de componentes entre elementos con títulos de categoría largos, el Gráfico de barras apiladas es la opción ideal. Al apilar los segmentos de datos horizontalmente de izquierda a derecha a lo largo del eje Y, esta visualización mantiene la claridad de las etiquetas largas al mostrar tanto los totales generales de las categorías como el desglose proporcional interno. Funciona especialmente bien para resultados demográficos de encuestas, asignación de recursos de proyectos por departamento o flujos de conversión multicanal.
La mecánica de las barras horizontales apiladas
Crear un gráfico horizontal apilado implica usar la misma apilado propiedad que los gráficos de columnas apiladas, combinada con un eje Y basado en categorías. Cuando múltiples type: 'bar' series comparten una clave apilado idéntica en una orientación horizontal, el motor de renderizado acumula los valores de izquierda a derecha a lo largo del eje X.
1. Configuración esencial
Para crear un gráfico de barras apiladas básico, establezca yAxis a type: 'category', xAxis a type: 'value', y asigne una clave coincidente apilado a cada serie:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
leyenda: {
data: ['Ingeniería', 'Producto', 'Diseño', 'Marketing']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Proyecto Alfa', 'Proyecto Beta', 'Proyecto Gama', 'Proyecto Delta']
},
series: [
{
name: 'Ingeniería',
type: 'bar',
stack: 'asignación',
data: [320, 302, 301, 334]
},
{
name: 'Producto',
type: 'bar',
stack: 'asignación',
data: [120, 132, 101, 134]
},
{
name: 'Diseño',
type: 'bar',
stack: 'asignación',
data: [220, 182, 191, 234]
},
{
name: 'Marketing',
type: 'bar',
stack: 'asignación',
data: [150, 212, 201, 154]
}
]
};
Técnicas estructurales avanzadas
Las barras horizontales apiladas se pueden configurar para comparar volúmenes absolutos o normalizarse para mostrar porcentajes entre categorías.
1. Gráfico de barras horizontales normalizado al 100%
Para evaluar proporciones relativas en lugar de conteos absolutos en categorías de larga extensión, normalice sus datos de series para que sumen el 100% por fila:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Satisfecho', 'Neutral', 'Insatisfecho']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Éxito del cliente empresarial',
'Servicios de soporte para mercado medio',
'Incorporación autónoma'
]
},
series: [
{
name: 'Satisfecho',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Neutral',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Insatisfecho',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Ajuste fino del diseño y estilo
Los límites visuales limpios y los extremos redondeados dan a las barras horizontales apiladas un aspecto pulido y moderno.
1. Separación de segmentos y redondeo de extremos externos
Aplicar líneas verticales delgadas para delimitar los segmentos internos, y limitar el estilo de radio de esquinas al último segmento del lado derecho:
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Presupuesto Q1', 'Presupuesto Q2', 'Presupuesto Q3', 'Presupuesto Q4']
},
series: [
{
name: 'Costos fijos',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Costos variables',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Discrecional',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Esquinas redondeadas en el extremo derecho
}
}
]
};
Prácticas recomendadas estratégicas
- Línea de base del primer segmento: El segmento más cercano a la línea base del eje Y es el más fácil de comparar entre categorías. Coloque siempre su componente más crítico como el primer objeto de serie.
- Límite de componentes apilados: Mantenga el número total de segmentos apilados en 5 o menos por barra para mantener un análisis visual claro sin abrumar al espectador.
- Etiquetas de texto dentro de la barra: Para barras horizontales apiladas con segmentos anchos, considere habilitar
label: { show: true, position: 'inside' }para que los valores individuales de los segmentos sean legibles sin depender de las sugerencias al pasar el cursor.