Pour analyser les répartitions des composants sur des éléments ayant des titres de catégorie longs, le Diagramme en barres empilées est le choix idéal. En empilant les segments de données horizontalement de gauche à droite le long de l’axe Y, cette visualisation préserve la clarté des étiquettes longues tout en affichant à la fois les totaux globaux des catégories et la répartition proportionnelle interne. Il fonctionne particulièrement bien pour les résultats démographiques d’enquêtes, l’allocation des ressources de projet par département ou les pipelines de conversion multicanal.
Le fonctionnement des barres horizontales empilées
La création d’un graphique empilé horizontal implique l’utilisation de la même empilement propriété que les graphiques en barres empilées verticales, associée à un axe Y basé sur des catégories. Lorsque plusieurs type: 'barre' séries partagent une clé d’empilement identique empilement sur une orientation horizontale, le moteur de rendu accumule les valeurs de gauche à droite le long de l’axe X.
1. Configuration essentielle
Pour créer un diagramme en barres empilées de base, définissez yAxis à type: 'catégorie', xAxis à type: 'valeur', et attribuez une chaîne d’empilement correspondante à chaque série :empilementchaîne à chaque série :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Ingénierie', 'Produit', 'Conception', 'Marketing']
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Projet Alpha', 'Projet Beta', 'Projet Gamma', 'Projet Delta']
},
series: [
{
name: 'Ingénierie',
type: 'bar',
stack: 'allocation',
data: [320, 302, 301, 334]
},
{
name: 'Produit',
type: 'bar',
stack: 'allocation',
data: [120, 132, 101, 134]
},
{
name: 'Conception',
type: 'bar',
stack: 'allocation',
data: [220, 182, 191, 234]
},
{
name: 'Marketing',
type: 'bar',
stack: 'allocation',
data: [150, 212, 201, 154]
}
]
};
Techniques structurelles avancées
Les barres horizontales empilées peuvent être configurées pour une comparaison absolue des volumes ou normalisées pour afficher des ratios en pourcentage entre les catégories.
1. Graphique à barres horizontales normalisées à 100 %
Pour évaluer les ratios relatifs plutôt que les comptages absolus sur des catégories longues, normalisez vos données de série pour qu’elles totalisent 100 % par ligne :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Satisfait', 'Neutre', 'Insatisfait']
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: [
'Succès client entreprise',
'Services d’assistance pour le marché intermédiaire',
'Onboarding auto-serveur'
]
},
series: [
{
name: 'Satisfait',
type: 'bar',
stack: 'feedback',
data: [75, 60, 45]
},
{
name: 'Neutre',
type: 'bar',
stack: 'feedback',
data: [18, 25, 35]
},
{
name: 'Insatisfait',
type: 'bar',
stack: 'feedback',
data: [7, 15, 20]
}
]
};
Affinage du layout et du style
Des limites visuelles nettes et des extrémités arrondies donnent aux barres empilées horizontales un aspect soigné et moderne.
1. Séparation des segments et arrondi des extrémités externes
Appliquez des lignes de bord verticales fines pour délimiter les segments internes, et limitez le style d’arrondi des coins au dernier segment à droite :
option = {
grid: {
left: '15%',
right: '10%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Budget Q1', 'Budget Q2', 'Budget Q3', 'Budget Q4']
},
series: [
{
name: 'Coûts fixes',
type: 'bar',
stack: 'budget',
data: [400, 420, 410, 430],
itemStyle: {
color: '#5470c6',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Coûts variables',
type: 'bar',
stack: 'budget',
data: [200, 250, 220, 280],
itemStyle: {
color: '#91cc75',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Discretionnaire',
type: 'bar',
stack: 'budget',
data: [100, 150, 130, 190],
itemStyle: {
color: '#fac858',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [0, 6, 6, 0] // Coins arrondis sur le capot de l'extrémité droite
}
}
]
};
Meilleures pratiques stratégiques
- Base du premier segment : Le segment le plus proche de la base de l’axe Y est le plus facile à comparer entre les catégories. Placez toujours votre composant le plus critique en tant que premier objet de série.
- Limitez les composants empilés : Limitez le nombre total de segments empilés à 5 ou moins par barre afin de maintenir une analyse visuelle claire sans surcharger le spectateur.
- Étiquettes de texte dans la barre : Pour les barres empilées horizontales avec des segments larges, envisagez d’activer
label: { show: true, position: 'inside' }afin de rendre les valeurs individuelles des segments lisibles sans dépendre des infobulles au survol.