web-dev-qa-db-ja.com

合計100%の比率を変更するウィジェットを推奨してください

可能性のある複製:
予算作成インターフェースの作成方法(アイテムの合計は100に等しくなければなりません)?

合計100%になるアイテムの比率をユーザーが変更できるようにする必要があります。本質的には、インタラクティブな円グラフについて話しているのですが、そのようなものが存在していても、(特に多数のスライスを使用して)あまり使用できないか、アクセスできない場合があります。

私は現在、0〜100%のスライダーの垂直系列(隣接するテキストフィールドの読み出しもあり、編集可能)を持っています。下に動的に更新される合計があり、「100%でなければならない」というラベルが付いています。合計が100%になるまで、フォームは送信できません。シリーズには最大14個のアイテムを含めることができます。

誰かがもっと良いことを考えることができますか?

3
francois

上記のように、@ francoisで回答します。

ここのデモ:buger.github.com/skill_weight_ui/#は基本的に私の質問に答えます。 (彼らはこの質問から来ます、ux.stackexchange.com/questions/3736/…Janのコメントが私を導きました。私は「標準」バージョン(「100%以上」の警告付き)ではなく、ユーザーが保持したいと思うデータを効果的に破壊するため、相対的なものの1つです。スライドの動作を見つけるのは非常に難しく、テキストフィールドも保持したいので、アフォーダンスに取り組む必要があります。手動入力用。

1
Rahul

これは今私が考えていることなので、他の答えを知りたいです。

私の場合、ユーザーは一定の金額/クレジット/ポイント/使い切りを持ち、いくつかの異なるオプション間でそれを割り当てる必要があります。

これまでに思いついたのは、あなたが言ったように、各オプションのスライダーです。私が持っていた他の唯一の考えは、画面に プログレスバー のようなものを表示することでしたstuffユーザーが割り当てを残しており、スライダーを動かすとゼロになります。

ただし、これは、ユーザーがまだ実行中のオプションの割り当てについてユーザーにフィードバックを提供するのに特に役立ちません。ユーザーがスライダーを動かすときに、オプションの色/サイズを(上品に)変更してみてください。

0
alexmuller

Google APIをご覧ください。円グラフだけでなく、これまでにない他の種類のグラフと、ユーザーの操作に応答するためにこれらを作成する方法を示すコード例があります。

http://code.google.com/apis/chart/

0
ʍǝɥʇɐɯ