Graphique en colonnes groupées : données multi-séries et espacement

Dans l’analyse de données et les rapports commerciaux, le Graphique en colonnes groupées (également appelé graphique en colonnes regroupées) est l’outil principal pour la comparaison côte à côte sur plusieurs dimensions. Alors qu’un graphique en colonnes standard évalue une seule métrique par catégorie, les graphiques en colonnes groupées positionnent des jeux de données liés côte à côte dans la même catégorie. Cela permet une évaluation visuelle immédiate des tendances au fil du temps, performance entre les équipes ou performance multi-métrique.

Le fonctionnement des colonnes groupées

Les graphiques en colonnes groupées fonctionnent sur un système de coordonnées partagé où l’axe horizontal représente des catégories discrètes et l’axe vertical gère des valeurs continues. Le regroupement est obtenu en déclarant plusieurs objets de série qui partagent exactement la même alignement de catégorie sur l’axe horizontal. Le moteur de mise en page calcule automatiquement le décalage nécessaire et affiche chaque série côte à côte dans son bloc de catégorie respectif.

1. Configuration essentielle

Pour créer un graphique en colonnes groupées, définissez un seul axe catégoriel et fournissez plusieurs objets de série avec type : 'barre':

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'ombre' }
    },
    légende: {
        data: ['Revenu 2025', 'Revenu 2026']
    },
    axeX: {
        type: 'catégorie',
        data: ['T1', 'T2', 'T3', 'T4']
    },
    axeY: {
        type: 'valeur'
    },
    série: [
        {
            name: 'Revenu 2025',
            type: 'barre',
            data: [320, 332, 301, 334]
        },
        {
            name: 'Revenu 2026',
            type: 'barre',
            data: [220, 182, 191, 234]
        }
    ]
};

Techniques structurelles avancées

Ajouter une troisième ou quatrième série augmente la densité du graphique. Pour maintenir la clarté, vous pouvez affiner le style des séries, l’espacement de mise en page et les indices visuels.

1. Personnalisation du style entre les groupes

Appliquer des couleurs uniques, des coins arrondis ou des styles d’éléments personnalisés facilite la distinction entre les groupes individuels dans les graphiques denses :

option = {
    légende: {
        data: ['Produit A', 'Produit B', 'Produit C']
    },
    axeX: {
        type: 'catégorie',
        data: ['Amérique du Nord', 'Europe', 'Asie-Pacifique']
    },
    axeY: {
        type: 'valeur'
    },
    série: [
        {
            name: 'Produit A',
            type: 'barre',
            data: [150, 230, 224],
            styleÉlément: {
                couleur: '#5470c6',
                rayonCoin: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produit B',
            type: 'barre',
            data: [180, 200, 210],
            styleÉlément: {
                couleur: '#91cc75',
                rayonCoin: [4, 4, 0, 0]
            }
        },
        {
            name: 'Produit C',
            type: 'barre',
            data: [120, 140, 190],
            styleÉlément: {
                couleur: '#fac858',
                rayonCoin: [4, 4, 0, 0]
            }
        }
    ]
};

Affinage de la mise en page et de l’espacement

L’espacement est crucial lors de l’utilisation de colonnes groupées. Contrôler l’écart entre les colonnes du même groupe par rapport à l’écart entre les groupes de catégories distincts évite le brouillage visuel.

1. Espacements internes vs. espacements de catégorie

Utilisez les attributs d’espacement pour équilibrer la densité de mise en page :

• barGap: Contrôle l’espace entre les colonnes dans le même groupe de catégories (par exemple, '20%' ou '0%' pour les colonnes adjacentes).
• barCategoryGap: Contrôle l’espace entre les différents groupes de catégories (par exemple, '40%').
• barWidth: Contrôle la largeur de la colonne par rapport à l’espace de catégorie.

option = {
    legend: {
        data: ['Prévu', 'Réel']
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Prévu',
            type: 'bar',
            data: [100, 120, 140, 160, 180],
            barGap: '10%',
            barCategoryGap: '35%'
        },
        {
            name: 'Réel',
            type: 'bar',
            data: [95, 125, 130, 170, 175]
        }
    ]
};

Meilleures pratiques stratégiques

• Limite du nombre de groupes : Évitez de placer plus de 3 à 4 colonnes dans un seul groupe. Trop de colonnes par catégorie rendent le graphique difficile à lire.
• Inclure toujours une légende : Les graphiques groupés utilisent la couleur pour différencier les variables, une légende claire en haut ou en bas est obligatoire pour le contexte.
• Ordre des groupes cohérent : Maintenez la séquence des séries cohérente dans chaque catégorie (par exemple, placez toujours « 2025 » avant « 2026 »).