Lors de l’évaluation de la répartition structurelle à travers des métriques discrètes, le Graphique en colonnes empilées offre un moyen efficace de visualiser les distributions partie-tout. Contrairement aux dispositions groupées qui étalent les séries de données horizontalement, les graphiques empilés accumulent les valeurs verticalement dans une seule limite de colonne. Ce format permet de surveiller facilement la croissance totale des catégories tout en suivant les proportions changeantes des sous-composants internes, tels que le trafic des appareils réparti par système d’exploitation ou les répartitions des dépenses trimestrielles entre les départements.
Le fonctionnement des colonnes empilées
Les graphiques en colonnes empilées reposent sur l’attribution d’un identifiant correspondant empilement à travers plusieurs séries. Lorsque le moteur de rendu détecte des valeurs identiques de empilement sur une série avec type : 'barre', il empile les valeurs numériques séquentiellement le long de l’axe vertical Y au lieu de dessiner des colonnes superposées ou côte à côte.
1. Configuration essentielle
Pour créer un graphique en colonnes empilées de base, définissez un axe X basé sur des catégories et appliquez une propriété commune empilement à chaque série dans votre séries tableau :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Direct', 'Recherche organique', 'Publicités payées', 'Référencement']
},
xAxis: {
type: 'category',
data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Recherche organique',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Publicités payées',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Référencement',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Techniques structurelles avancées
Les graphiques en colonnes empilées peuvent être adaptés pour afficher des distributions en pourcentage ou des sous-groupes sélectifs selon vos besoins analytiques.
1. Colonnes empilées normalisées à 100 %
Lorsque votre objectif principal est de comparer les ratios de proportions plutôt que les totaux numériques absolus, convertissez vos valeurs de données en pourcentages normalisés totalisant 100 % par catégorie :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Bureau', 'Mobile', 'Tablette']
},
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Bureau',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Mobile',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Tablette',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Regroupement multi-empilement
Vous pouvez combiner le regroupement et l’empilement dans une seule vue en utilisant des identifiants distinctsempilementdans les séries. Par exemple, comparez les totaux réels aux objectifs, où chacun est composé de sous-composants empilés :
option = {
legend: {
data: ['Produit A Réel', 'Produit B Réel', 'Objectif Produit A', 'Objectif Produit B']
},
xAxis: {
type: 'category',
data: ['T1', 'T2', 'T3', 'T4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produit A Réel',
type: 'bar',
stack: 'réel',
data: [120, 150, 180, 200]
},
{
name: 'Produit B Réel',
type: 'bar',
stack: 'réel',
data: [80, 90, 100, 110]
},
{
name: 'Objectif Produit A',
type: 'bar',
stack: 'objectif',
data: [130, 160, 190, 210]
},
{
name: 'Objectif Produit B',
type: 'bar',
stack: 'objectif',
data: [90, 100, 110, 120]
}
]
};
Affinage du layout et du style
Un bon aspect visuel est essentiel pour les colonnes empilées afin que les segments restent identifiables sans provoquer de fatigue visuelle.
1. Frontières des segments et extrémités arrondies supérieures
Appliquez des séparateurs de bordures nettes entre les segments empilés et limitez le redressement des coins uniquement au segment supérieur de la série dans l’empilement :
option = {
xAxis: {
type: 'category',
data: ['Jan', 'Fév', 'Mar', 'Avr']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Couche de base',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Couche intermédiaire',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Couche supérieure',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Coins arrondis uniquement sur le segment supérieur
}
}
]
};
Meilleures pratiques stratégiques
- Limitez le nombre de segments :Évitez d’empiler plus de 4 à 5 catégories par colonne. Au-delà de ce seuil, comparer les segments du milieu entre les colonnes devient visuellement difficile.
- Ancrez les éléments de base en bas :Placez votre métrique la plus importante ou votre plus grande sous-composante en premier dans le
sérietableau afin qu’elle repose directement sur la ligne de base pour un alignement facile. - Utilisez une palette à fort contraste ou des bordures :Appliquez des lignes de bordure blanches subtiles entre les segments pour maintenir une distinction claire lorsque les couleurs adjacentes ont des niveaux de contraste similaires.