Graphique boîte à moustaches : distribution statistique et détection des valeurs aberrantes

Lorsque vous devez analyser la dispersion des données et identifier des points de données inhabituels au sein de groupes, le Graphique boîte à moustaches (ou diagramme boîte à moustaches) est l’outil visuel statistique standard. En résumant les données continues en cinq valeurs clés — minimum, premier quartile (Q1), médiane (Q2), troisième quartile (Q3) et maximum — les graphiques boîte à moustaches révèlent la dissymétrie, la variabilité et les valeurs aberrantes extrêmes d’un coup d’œil, sans encombrer l’écran avec les données brutes.

Le fonctionnement des graphiques boîte à moustaches

Dans Apache ECharts, les boîtes statistiques sont rendues en utilisant type : 'boxplot'. Chaque entrée de jeu de données attend un tableau numérique à 5 éléments ordonnés comme suit : [Minimum, Q1, Médiane, Q3, Maximum]. ECharts inclut également un outil intégré de préparation des données pour calculer directement ces limites statistiques à partir des nombres bruts.

1. Configuration de base

Pour construire un graphique boîte à moustaches de base, mappez les catégories sur l’axe X et fournissez des tableaux de résumé à 5 nombres calculés dans vos données de série :

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Catégorie 1', 'Catégorie 2', 'Catégorie 3', 'Catégorie 4', 'Catégorie 5']
    },
    yAxis: {
        type: 'value',
        name: 'Valeur de distribution'
    },
    series: [
        {
            name: 'Boîte à moustaches',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Min, Q1, Médiane, Q3, Max]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Techniques structurelles avancées

Vous pouvez superposer des points de dispersion des valeurs aberrantes ou créer des graphiques boîte à moustaches horizontaux pour des catégories dont les noms sont longs.

1. Disposition horizontale du graphique boîte à moustaches

Définissez yAxis comme échelle des catégories et xAxis comme échelle des valeurs numériques pour retourner les graphiques boîte à moustaches horizontalement afin d’améliorer la lisibilité des étiquettes :

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Serveur Alpha', 'Serveur Beta', 'Serveur Gamma']
    },
    series: [
        {
            name: 'Latence (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
            }
        }
    ]
};

Affinage du layout et du style

Les couleurs personnalisées des boîtes, les largeurs des moustaches et le formatage de la ligne médiane améliorent la distinction visuelle dans les tableaux de bord complexes.

1. Remplissage personnalisé des boîtes et style des valeurs aberrantes

Personnalisez les bordures des boîtes, les couleurs de remplissage et les propriétés des lignes des moustaches pour correspondre à votre design d’interface :

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Groupe A', 'Groupe B', 'Groupe C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Répartition des scores',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Limites de largeur de boîte réactive
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Meilleures pratiques stratégiques

• Vérifiez l’ordre des résumés :Vérifiez que les valeurs du tableau suivent l’ordre strict :[Minimum, Q1, Médiane, Q3, Maximum]. Un ordre incorrect provoquera des artefacts d’affichage.
• Superposez les valeurs aberrantes avec une série en nuage de points :Utilisez une série secondairenuage de points sur le dessus du diagramme en boîte pour afficher les valeurs aberrantes statistiques extrêmes comme des points de données individuels.
• Ajustez les marges de la grille :Assurez-vous d’avoir une marge suffisantegrid.bottom ou grid.left pour que les noms de catégorie longs ne heurtent pas les lignes des moustaches.