web-dev-qa-db-fra.com

Comment montrer qu'un graphique est une version agrandie d'un autre?

J'ai deux graphiques côte à côte, montrant des données de séries chronologiques.

Quelle serait la meilleure façon de transmettre cela:

  • Le deuxième graphique est une version agrandie du premier
  • Donnez une indication de l'aire du premier graphique qui est mise en évidence dans le second?
5
Sam

Vous pouvez simplement dessiner une case sur le premier graphique qui signifie quelle zone est mise en surbrillance dans le second comme ceci:

enter image description here

Beaucoup de jeux utilisent cela pour indiquer quelle partie de la carte que vous voyez sur votre écran par rapport à la carte entière.

Ou si vous ne voulez pas entraver la visualisation du premier graphique avec la superposition, vous pouvez avoir une vue de type mini-carte au-dessus du deuxième graphique montrant la même vue.

enter image description here

7
DasBeasto

Quelques idées supplémentaires pour répondre à votre question de différenciation du zoom:

  1. Au lieu d'une superposition, vous pouvez essayer une fenêtre d'aperçu avec une version beaucoup plus simple du graphique.

enter image description here

Voici un exemple interactif: http://demos.zingchart.com/view/BWTCT87D

Cela donne aux utilisateurs leurs repères assez efficacement sans obscurcir la zone de la carte et en utilisant un minimum d'espace.

  1. Vous pouvez essayer de laisser les utilisateurs défiler au lieu de sélectionner pour zoomer. De cette façon, la barre de défilement montrera qu'ils sont à mi-chemin dans le graphique, ne visualisant pas l'ensemble des données. Pensez à quelque chose comme ça: enter image description here Version interactive: http://www.zingchart.com/gallery/chart/#!multiseries-bar-chart-with-scrolling

Je fais partie de l'équipe ZingChart, j'ai donc utilisé leur bibliothèque de graphiques pour créer ces démos. D'autres bibliothèques peuvent accomplir des fonctionnalités similaires. Veuillez me faire savoir si je peux répondre à vos questions sur les exemples inclus ici.

5
Merrily