Gráfico de caja: Distribución estadística y detección de valores atípicos

Cuando necesitas analizar la dispersión de datos e identificar puntos de datos inusuales entre grupos, la Gráfico de caja (o gráfico de caja y bigotes) es la herramienta visual estadística estándar. Al resumir datos continuos en cinco números clave—mínimo, primer cuartil (Q1), mediana (Q2), tercer cuartil (Q3) y máximo—los gráficos de caja revelan asimetría, variabilidad y valores atípicos extremos de un vistazo sin saturar la pantalla con datos brutos.

La mecánica de los gráficos de caja

En Apache ECharts, las cajas estadísticas se representan utilizando type: 'boxplot'. Cada entrada de conjunto de datos espera un arreglo numérico de 5 elementos ordenado como [Mínimo, Q1, Mediana, Q3, Máximo]. ECharts también incluye una herramienta integrada de preparación de datos para calcular estos límites estadísticos directamente a partir de números brutos.

1. Configuración esencial

Para construir un gráfico de caja básico, asigna categorías a lo largo del eje X y proporciona arreglos de resumen de cinco números calculados dentro de tus datos de serie:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Categoría 1', 'Categoría 2', 'Categoría 3', 'Categoría 4', 'Categoría 5']
    },
    yAxis: {
        type: 'value',
        name: 'Valor de distribución'
    },
    series: [
        {
            name: 'Gráfico de caja',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Mín, Q1, Mediana, Q3, Máx]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Técnicas estructurales avanzadas

Puedes superponer puntos de dispersión de valores atípicos o crear gráficos de caja horizontales para categorías con nombres largos.

1. Diseño de gráfico de caja horizontal

Establece yAxis como escala de categorías y xAxis como escala de valores numéricos para voltear los gráficos de caja horizontalmente para una mejor legibilidad de las etiquetas:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Servidor Alpha', 'Servidor Beta', 'Servidor Gamma']
    },
    series: [
        {
            name: 'Latencia (ms)',
            type: 'boxplot',
            data: [
                [12, 18, 22, 28, 35],
                [15, 24, 30, 38, 48],
                [8, 12, 15, 20, 27]
            ],
            itemStyle: {
                color: '#e0f2fe',
                borderColor: '#0284c7',
                borderWidth: 2
            }
        }
    ]
};

Ajuste fino de diseño y estilo

Los colores personalizados de los cuadros, el ancho de las líneas de bigotes y el formato de la línea de la mediana mejoran la distinción visual en diseños complejos de paneles.

1. Relleno personalizado de cuadros y estilo de valores atípicos

Estile los bordes de los cuadros, los colores de relleno y las propiedades de las líneas de bigotes para que coincidan con el diseño de tu interfaz:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Grupo A', 'Grupo B', 'Grupo C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Distribución de puntuaciones',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Límites de ancho de cuadro responsivo
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Mejores prácticas estratégicas

• Verifique el orden de los resúmenes:Verifique que los valores del arreglo sigan el orden estricto:[Mínimo, Q1, Mediana, Q3, Máximo]. Un orden incorrecto provocará errores de renderizado.
• Superponer valores atípicos con una serie de dispersión:Utilice una serie secundariadispersión en la parte superior del diagrama de caja para mostrar valores atípicos estadísticos extremos como puntos de datos individuales.
• Ajuste el relleno de la cuadrícula:Asegúrese de que haya un relleno adecuado engrid.bottomogrid.left para que los nombres largos de categorías no choquen con las líneas de bigotes.