{"id":2078,"date":"2026-07-24T09:24:14","date_gmt":"2026-07-24T09:24:14","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/grouped-column-chart-multi-series-data-and-spacing-guide\/"},"modified":"2026-07-24T09:24:14","modified_gmt":"2026-07-24T09:24:14","slug":"grouped-column-chart-multi-series-data-and-spacing-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/grouped-column-chart-multi-series-data-and-spacing-guide\/","title":{"rendered":"Graphique en colonnes group\u00e9es : donn\u00e9es multi-s\u00e9ries et espacement"},"content":{"rendered":"

Dans l’analyse de donn\u00e9es et les rapports commerciaux, le Graphique en colonnes group\u00e9es<\/strong> (\u00e9galement appel\u00e9 graphique en colonnes regroup\u00e9es) est l’outil principal pour la comparaison c\u00f4te \u00e0 c\u00f4te sur plusieurs dimensions. Alors qu’un graphique en colonnes standard \u00e9value une seule m\u00e9trique par cat\u00e9gorie, les graphiques en colonnes group\u00e9es positionnent des jeux de donn\u00e9es li\u00e9s c\u00f4te \u00e0 c\u00f4te dans la m\u00eame cat\u00e9gorie. Cela permet une \u00e9valuation visuelle imm\u00e9diate des tendances au fil du temps, performance entre les \u00e9quipes ou performance multi-m\u00e9trique<\/em>.<\/p>\n

Le fonctionnement des colonnes group\u00e9es<\/h2>\n

Les graphiques en colonnes group\u00e9es fonctionnent sur un syst\u00e8me de coordonn\u00e9es partag\u00e9 o\u00f9 l’axe horizontal repr\u00e9sente des cat\u00e9gories discr\u00e8tes et l’axe vertical g\u00e8re des valeurs continues. Le regroupement est obtenu en d\u00e9clarant plusieurs objets de s\u00e9rie qui partagent exactement la m\u00eame alignement de cat\u00e9gorie sur l’axe horizontal. Le moteur de mise en page calcule automatiquement le d\u00e9calage n\u00e9cessaire et affiche chaque s\u00e9rie c\u00f4te \u00e0 c\u00f4te dans son bloc de cat\u00e9gorie respectif.<\/p>\n

1. Configuration essentielle<\/h3>\n

Pour cr\u00e9er un graphique en colonnes group\u00e9es, d\u00e9finissez un seul axe cat\u00e9goriel et fournissez plusieurs objets de s\u00e9rie avec type : 'barre'<\/code>:<\/p>\n

\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n ECharts<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit ECharts in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
option = {\r\n    tooltip: {\r\n        trigger: 'axis',\r\n        axisPointer: { type: 'ombre' }\r\n    },\r\n    l\u00e9gende: {\r\n        data: ['Revenu 2025', 'Revenu 2026']\r\n    },\r\n    axeX: {\r\n        type: 'cat\u00e9gorie',\r\n        data: ['T1', 'T2', 'T3', 'T4']\r\n    },\r\n    axeY: {\r\n        type: 'valeur'\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            name: 'Revenu 2025',\r\n            type: 'barre',\r\n            data: [320, 332, 301, 334]\r\n        },\r\n        {\r\n            name: 'Revenu 2026',\r\n            type: 'barre',\r\n            data: [220, 182, 191, 234]\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Techniques structurelles avanc\u00e9es<\/h2>\n
Ajouter une troisi\u00e8me ou quatri\u00e8me s\u00e9rie augmente la densit\u00e9 du graphique. Pour maintenir la clart\u00e9, vous pouvez affiner le style des s\u00e9ries, l’espacement de mise en page et les indices visuels.<\/p>\n
1. Personnalisation du style entre les groupes<\/h3>\n
Appliquer des couleurs uniques, des coins arrondis ou des styles d’\u00e9l\u00e9ments personnalis\u00e9s facilite la distinction entre les groupes individuels dans les graphiques denses :<\/p>\n
\n
\nECharts<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    ECharts<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
option = {\r\n    l\u00e9gende: {\r\n        data: ['Produit A', 'Produit B', 'Produit C']\r\n    },\r\n    axeX: {\r\n        type: 'cat\u00e9gorie',\r\n        data: ['Am\u00e9rique du Nord', 'Europe', 'Asie-Pacifique']\r\n    },\r\n    axeY: {\r\n        type: 'valeur'\r\n    },\r\n    s\u00e9rie: [\r\n        {\r\n            name: 'Produit A',\r\n            type: 'barre',\r\n            data: [150, 230, 224],\r\n            style\u00c9l\u00e9ment: {\r\n                couleur: '#5470c6',\r\n                rayonCoin: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produit B',\r\n            type: 'barre',\r\n            data: [180, 200, 210],\r\n            style\u00c9l\u00e9ment: {\r\n                couleur: '#91cc75',\r\n                rayonCoin: [4, 4, 0, 0]\r\n            }\r\n        },\r\n        {\r\n            name: 'Produit C',\r\n            type: 'barre',\r\n            data: [120, 140, 190],\r\n            style\u00c9l\u00e9ment: {\r\n                couleur: '#fac858',\r\n                rayonCoin: [4, 4, 0, 0]\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier ECharts dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
\u00a0<\/p>\n
Affinage de la mise en page et de l’espacement<\/h2>\n
L’espacement est crucial lors de l’utilisation de colonnes group\u00e9es. Contr\u00f4ler l’\u00e9cart entre les colonnes du m\u00eame groupe par rapport \u00e0 l’\u00e9cart entre les groupes de cat\u00e9gories distincts \u00e9vite le brouillage visuel.<\/p>\n
1. Espacements internes vs. espacements de cat\u00e9gorie<\/h3>\n
Utilisez les attributs d’espacement pour \u00e9quilibrer la densit\u00e9 de mise en page :<\/p>\n