web-dev-qa-db-ja.com

ラベルが重なっているグラフ

ドルの金額に基づいて棒グラフを作成して表示するWebアプリがあります。典型的なグラフは次のようになります。

typical graph

ご覧のように、グラフの下部にあるレイヤーには、金額が小さすぎて、ラベルを重ねずに表示するには小さすぎます。

これを補正して、グラフの下部を読みやすくするための最良の方法は何ですか?

私が考えたこと:

  • ラベルが重ならないように、レイヤーの最小の高さを設定します。これは最高に見えますが、すべてをフィットさせるために残りのレイヤーを圧縮する必要があるため、グラフは正確ではなくなります。

stretched

  • レイヤーが短すぎる場合、ラベルが重ならないようにラベルをずらします。これはオーバーラップするよりは良いですが、それでも素晴らしいIMOには見えません。

dashed

  • ラベルをすべて削除し、色に基づいて別のキー/凡例に配置します。これはクリーンなソリューションですが、垂直スライスのラベルはすでにキーに分割されており、実際のグラフから削除するほど、解釈が難しくなり、その値の一部が失われるのではないかと心配しています。
10
TheIronCheek

常にすべての金額を詳細に確認することが絶対に必要な場合は、2番目のソリューションのバリエーションを使用しても、1つの列に数値を保持できます。このような

enter image description here

あるいは、小さなガラスを表示するために、大きなガラスのようなものを実装することもできます。ホバーのツールヒントについて最初に考えましたが、量が非常に少ないため、量の高さが1ピクセルにすぎないため、ホバーするのは簡単ではありません。

18
BrunoH

1つのグラフで解決するいくつかの視覚化の問題があります。ユーザーはこれをどのように操作していますか?

あなたの質問は主にラベルに焦点を当てていますが、支払いの順序を示すことに加えて、要素が支払いのためにいくつかのエンティティ間で分割されているときを示すことにも言及しました。

つまり、積み上げ棒グラフがあります-グラフのように重い要素を持ち上げているようなものです。

ユーザーは、理解する必要がある場合がありますおよび操作/探索

  • 誰が支払っているか(カテゴリのラベル)
  • 一連の支払い
  • 彼らの支払い金額
  • カテゴリ全体に対する割合
  • 分割払いのカテゴリ

ユースケース全体(および制約)はわかりませんが、視覚化タイプを変更することを検討してください。

1.比較値のテーブルと、並べ替えとドリルダウンの機能を検討します。

トレードオフはいくつかありますが(視覚的なゲシュタルトよりも読み取りが多いなど)、並べ替え可能な方法でデータを前面に出し、目の疲れや解釈のない小さな%カテゴリを表示できます。

サマリーテーブルでは次のことができます。

  • 合計を表示(重要な場合は、ユーザーが合計を把握できるように下部に要約を表示します)
  • 全体の一部を表示:%列により、ユーザーは相対値を確認できます
  • カテゴリごとに支払いを分割する(ユーザーが小容量のカテゴリで表示する垂直線の代わりに、カテゴリにラベルを付け、ホバーの詳細を許可する)
  • すばやく比較するために並べ替え
  • スケール:カテゴリが追加されると、行を追加できます
  • ラベルを表示する:現在のラベルでは、ユーザーは引き続き、どの色がどのカテゴリに該当するかを探す必要があります

視覚化は大きなダッシュボードの一部ですか?

その場合は、テーブル自体に色の凡例を配置して、他の視覚化と密接に関連付けることができます。

enter image description here

2.または、横棒グラフを試します。

積み上げ面の例では、ユーザーは高さを使用してマグニチュードの比較を一目で確認する必要があります。

水平チャートを使用すると、長さによって値を評価する人間の能力を利用できます。表の上にある並べ替えコントロールを使用して、探索を強化できます。

Show me the Numbers、by Stephen Few(pg 94)

視覚は高度に調整されており、共通のベースラインを共有するオブジェクトの長さの違いを確認できますが、2D領域の違いを見分けるのには適していません。

enter image description here

30
Mike M

いくつかの種類のグラフドリルダウン の機能を組み合わせて試すことができます。

0