Duplicata possible:
Comment construire une interface de budgétisation (la somme des éléments doit être égale à 100)?
J'ai besoin que l'utilisateur puisse modifier les ratios des éléments totalisant jusqu'à 100%. Essentiellement, je parle d'un graphique circulaire interactif, mais même si une telle chose existait, elle ne serait probablement pas très utilisable (en particulier avec un grand nombre de tranches), ni accessible.
J'ai actuellement une série verticale de curseurs 0-100% (avec lecture du champ de texte adjacent, également modifiable), avec un total de mise à jour dynamique ci-dessous, étiqueté "doit être 100%". Le formulaire ne peut être soumis que lorsque le total est de 100%. Il peut y avoir jusqu'à 14 articles dans la série.
Quelqu'un peut-il penser à quelque chose de mieux?
Réponse de @francois, comme indiqué ci-dessus:
Les démos ici: buger.github.com/skill_weight_ui/# répondent essentiellement à ma question. (Ils viennent de cette question, ux.stackexchange.com/questions/3736/… vers laquelle le commentaire de Jan m'amène. Je pense que j'opterais pour la version "standard" (avec l'avertissement "plus de 100%"), plutôt que l'un des relatifs, car ils détruisent efficacement les données que l'utilisateur aurait pu vouloir conserver. Je devrais travailler sur les possibilités, car le comportement de la diapositive est très difficile à découvrir, et je voudrais également conserver les champs de texte pour la saisie manuelle.
C'est une chose à laquelle je pense en ce moment, donc je serai curieux de voir d'autres réponses.
Dans mon cas, l'utilisateur a une certaine somme d'argent/crédit/points/quoi que ce soit à utiliser, et il doit le répartir entre plusieurs options différentes.
Tout ce que j'ai trouvé jusqu'à présent est, comme vous l'avez mentionné, un curseur pour chaque option. La seule autre pensée que j'ai eue était d'afficher quelque chose qui ressemble à une barre de progression sur l'écran qui afficherait combien de choses l'utilisateur est parti pour allouer, et s'épuiserait à zéro en déplaçant les curseurs.
Mais cela n'aide pas particulièrement à donner à l'utilisateur des commentaires sur les options qu'il a allouées alors qu'il est encore en train de le faire. Je peux essayer de jouer (avec goût!) En changeant la couleur/taille des options lorsque l'utilisateur déplace les curseurs.
Jetez un œil à l'API Google. En plus des graphiques circulaires, il existe d'innombrables autres types de graphiques, ainsi que des exemples de code qui montrent comment ceux-ci peuvent être créés pour répondre à l'interaction de l'utilisateur: