Gérer les chevauchements dans des positions à changement dynamique
Ma question est similaire à celle-ci .
J'ai un graphique linéaire fait en utilisant c3js . Lorsque l'utilisateur modifie certains paramètres à l'aide de curseurs, la ligne est replacée.
J'ai également créé une légende personnalisée (par demande du client) dans laquelle l'étiquette collera à la fin de la ligne.
Ce serait bien si les lignes sont espacées, mais souvent elles sont rapprochées et j'obtiens un chevauchement. Quelle est la meilleure chose à faire ici?
Je voudrais faire quelque chose comme this , mais il n'y a rien de structuré comme des lignes dans mon exemple. Je ne peux pas non plus faire this , car le client a explicitement déclaré qu'il voulait que la légende suive la fin de la ligne.
Quelques idées différentes me viennent à l'esprit.
1 - faites correspondre la couleur de l'étiquette à la couleur de la ligne associée, donc même si elles se chevauchent, il est clair quelle étiquette appartient à quelle ligne.
2 - Mettre chaque étiquette dans un div contenant, en donnant éventuellement à ce contenant div une bordure de la même couleur que sa ligne associée, avec un fond blanc opaque ... et éventuellement lorsqu'un utilisateur clique sur une étiquette [edit: a label OR une ligne] faites-le sauter en position avant (z-index).
Edit 2: Je sais que ce n'est pas exactement ce que vous avez demandé, car les étiquettes ne suivent pas les lignes, mais c'est ainsi que Statcounter gère une situation similaire:
Une option serait de donner à l'utilisateur la possibilité de masquer une ou plusieurs des lignes et la possibilité d'afficher à nouveau les lignes masquées.
Post-scriptum:
Sur la base de ce que Dayluloli a déclaré:
Les lignes sont souvent rapprochées et se chevauchent.
La légende doit suivre la fin de ligne.
Ainsi, les lignes et la légende doivent être présentées dans le graphique.
Avec les quatre lignes de l'exemple, masquer l'une des lignes qui se chevauchent n'est pas nécessairement mieux que de changer l'indice z.
S'il y a plusieurs lignes et plusieurs lignes qui se chevauchent, il est possible que trop d'informations soient présentées dans un graphique.
La modification d'un ou de plusieurs index z peut ne pas avoir d'importance.
Même si le client accepte la séparation des lignes des légendes, il peut toujours être difficile pour l'utilisateur de voir les lignes.
Dans ce cas, l'utilisateur devrait probablement faire un choix: lesquels afficher simultanément? Étant donné que ce choix peut varier sur plusieurs facteurs que peut-être seul l'utilisateur peut décider au moment où le choix sera fait, donner à l'utilisateur la possibilité de faire des sélections serait probablement une option à considérer.