Graphique avec des étiquettes qui se chevauchent
J'ai une application Web qui crée et affiche un graphique à barres basé sur les montants en dollars. Un graphique typique ressemble à ceci:
Comme vous pouvez le voir, les couches en bas du graphique ont des montants en dollars trop petits pour afficher leurs étiquettes sans se chevaucher.
Quelle est la meilleure façon de compenser cela afin que le bas de mes graphiques soit plus facile à lire?
Des choses auxquelles j'ai pensé:
- Définissez une hauteur de couche minimale afin que les étiquettes ne puissent pas se chevaucher. Cela semble le meilleur, mais me oblige à écraser les couches restantes pour que tout soit en forme et donc le graphique n'est plus précis.
- Lorsqu'un calque est trop court, décalez les étiquettes afin qu'elles ne se chevauchent pas. C'est mieux qu'ils se chevauchent, mais ça n'a toujours pas l'air génial IMO.
- Retirez complètement les étiquettes et placez-les dans une clé/légende distincte en fonction de la couleur. C'est une solution propre, mais j'ai déjà les étiquettes des tranches verticales séparées en une clé et je crains que plus j'enlève du graphique réel, plus il est difficile à interpréter et perd donc une partie de sa valeur.
S'il est absolument nécessaire de voir tous les montants en détail tout le temps, vous pouvez aller avec une variation de votre deuxième solution mais garder les chiffres dans une colonne. comme ça
Alternativement, vous pouvez mettre en œuvre quelque chose comme un verre magnifiyng pour montrer les petites quantités. J'ai d'abord pensé aux info-bulles sur le survol, mais un montant pourrait être si petit que la hauteur d'un montant n'est que d'un pixel et qu'il n'est donc pas facile de survoler.
Vous avez plusieurs problèmes de visualisation à résoudre dans un seul graphique. Comment les utilisateurs interagissent-ils avec cela?
Votre question se concentre principalement sur les étiquettes, mais vous avez également mentionné le fait de montrer quand un élément est divisé entre plusieurs entités pour le paiement, en plus de montrer la séquence des paiements.
Vous avez donc un graphique en barres empilées qui soulève des charges lourdes.
Les utilisateurs peuvent avoir besoin de comprendre et manipuler/explorer :
- qui paie (l'étiquette de la catégorie)
- la séquence des paiements
- leur montant de paiement
- le pourcentage d'une catégorie par rapport à l'ensemble
- quelles catégories sont des paiements fractionnés
Je ne connais pas tout votre cas d'utilisation (et contraintes), mais vous pourriez envisager de modifier le type de visualisation.
1. Considérez un tableau pour les valeurs comparatives et la capacité de tri et d'exploration.
Il y a des compromis (comme peut-être plus de lecture qu'une gestuelle visuelle), mais cela avance les données de manière triable et peut montrer de petites catégories% sans fatigue oculaire ou interprétation.
Les tableaux récapitulatifs peuvent:
- Afficher les totaux (le résumé en bas, afin que les utilisateurs connaissent le total, si cela est important)
- Afficher des parties de l'ensemble: la colonne% permet aux utilisateurs de voir les valeurs relatives
- Répartir les paiements par catégorie (au lieu de lignes verticales, l'utilisateur doit voir dans les petites catégories de volume, il suffit d'étiqueter la catégorie et de permettre le survol des détails)
- Trier pour une comparaison rapide
- Échelle: à mesure que de nouvelles catégories sont ajoutées, vous pouvez ajouter des lignes supplémentaires
- Afficher les étiquettes: vos étiquettes actuelles obligent toujours l'utilisateur à chercher quelle couleur va avec quelle catégorie
Votre visualisation fait-elle partie d'un tableau de bord plus grand?
Si c'est le cas, vous pouvez mettre des légendes de couleurs dans le tableau lui-même, pour les relier à d'autres visualisations à proximité:
2. Ou essayez un graphique à barres horizontales.
Dans l'exemple de la zone empilée, les utilisateurs doivent utiliser la hauteur pour voir la comparaison d'amplitude en un coup d'œil.
Avec un graphique horizontal, vous pouvez profiter de la capacité humaine à évaluer les valeurs par longueur. Vous pouvez autoriser l'exploration par un contrôle de tri au-dessus du tableau.
extrait de Show me the Numbers, par Stephen Few (p. 94) :
La perception visuelle est hautement adaptée pour voir les différences entre les longueurs d'objets qui partagent une ligne de base commune mais pas bien adaptées pour discerner les différences entre les zones 2D.
Vous pouvez essayer une combinaison des fonctionnalités plusieurs types de graphiques et drill-down .