多層棒グラフのラベル付け
質問
Last.fm の棒グラフが大好きです。これにより、ある曲を別の曲で演奏する方法をすばやく比較できます。
アプリに同じデザインを適用しようとしています。サーバーの状態を監視し、より多くのものを表示する必要があります。たとえば、最後の列には、現在のアップロード/割り当てられたアップロード/物理的な制限のアップロードが表示されます。さらに多くのテキストが必要なため、ラベルがバーの上に収まらず、一部の部分が読みにくいです。 「50 Mb/60 Mb/80 Mb」がいかに醜いか見てください。これをどのように設計しますか？数百の行と数十の列があるため、画面上のスペースが制限されることに注意してください。
解決
Vitalyの提案のほとんどを採用しました。 「/」の前後にスペースを追加しました。スペースなしで試してみたが、解析が難しかった。明るい緑は読みにくいので、テキストを色分けしないことにしました。ヘッダーだけでなく、各行に単位を付けました。行が何であるかをより早く理解するために、スペースを犠牲にしています。
このようなものはどうですか：
- 割合を円グラフで表します。それらはそれほど多くのスペースを取りません。異なるタイプのデータ間で視覚的な違いがあるため、画面にはそれに対するより多くの順序があり、バーは常に意味のある幅を持っていることは明らかです（パーセンテージをバーとして表示するとき） 、それからいくつかの列ではそれらの幅は意味があります-100px = 100Mb、そしてパーセンテージ列ではそれは意味がありません-それは何かのちょうど100％パーセントです。それは非常に混乱しています）。
- バーから数字を取り出します。次に、幅と色の両方の点で、内部の数値を気にすることなく、バーの幅を試すことができます。
- 各測定単位は、行ごとに1回だけ指定してください。それは多くのスペースを解放します。実際のところ、ヘッダーで、列ごとに1回指定することを検討します。別のものに切り替える必要がある場合は、分数または倍数を使用してください。
新しいサーバーが既存の行に追加され、120Mbの物理的なアップロード制限がある場合、同じ列に100Mbと表示されているサーバーが小さくなるという要件が記載されていると思います。
それが事実である場合、解決策は言うほど簡単ではないので、私は同情します。 「最小値を見つけて、最小のバーが必要なテキストの全長を実行することを確認してから、はるかに大きな値を含む各列のフィールドを比例的に拡大します。」
私の提案は、私の仮定が正しい場合、組み合わせに焦点を当てることです
- テキストのないバー
- 長さが異なるため、各バーの中間マーカー
- ここの値を明らかにするツールチップを使用する
ユーザーは、各リソースの使用状況を視覚的に判断し、その上にカーソルを置くことで情報の2番目のレイヤーを表示できます。
それは、何百ものサーバー上のすべてのバーでリアルタイム値の通信を放棄できる場合です。
PSいい質問です。私の考えは厳密にラベルを付けるのではなく、もっと別の方法です。
テーブル内のスペースが狭い場合は、見出しの高さよりもテーブルの行の高さのスペースを節約の方がはるかに重要です。どうして？
- 各列の目的が正確にわからない場合、テーブルを用意しても意味がありません。
- テーブルのメイン行はテーブルの見出し行よりも多いため、行を10％節約することは、見出しを30％節約するよりも重要です。
以前と同じ垂直スペースで30％多いバーを取得するため、高さのあるヘッダーの「余分な」垂直スペースにその一部を使用しています。
「ビットレート」と「アップロード」のキードットおよび共有テキストの見出しは、html/cssでは簡単に作成できません。これらは、事前に準備されたビットマップです。 Vitalyはユニットを見出しに移動することを提案しており、並べ替えの矢印の上にそれらの余地があります。
いくつかの詳細：
- バーにドロップシャドウを付けると、バーを分離するのに役立ちます、非常に接近している場合でも。
- 積極的に縮小された文字スペース（および実際のスペースの削除）により、バー内テキストのフォントが大きくなり、他の方法よりも明確になります。
- 明るい色黒いテキストがはっきりと表示されるようにします。