web-dev-qa-db-ja.com

タイムライングラフィックを表現する最良の方法は何ですか

私は次のサーバーのダウンタイムを表現しようとしています:(さらにいくつかの組み合わせがあり、簡潔にするために削除しました)

サーバーA:4:00-4:30 AM

サーバーB:5:30-6:00 AM

サーバーC:6:00-6:30 AM

サーバーD:7:00-7:30 AM

私が作ったのはこれです:

enter image description here

これは私には雑然として見えます。これを簡単に示すより良い方法はありますか?

7
ring bearer

強調がすべて間違っている-チャートは1つのストーリーだけを伝える必要がある-1つ以上のサーバーでダウンタイムがあるという事実

次の手順を実行します。

  • サーバーが異なるという事実ではなく、ダウンタイムがあるという事実を強調します。ダウンタイムがない場合、ディスプレイは色味がなく、穏やかに見えます。
  • 色は特定のサーバーに関連しないため、色分けを完全に削除してください。これにより、ダウンタイムブロックのプロファイルがさらに向上します。
  • データテーブルの場合と同様に、グラフ上のサーバーを水平線で区切るだけです。
  • ダウンタイムがある場合は、適切なセクションをブロックしますが、バーの上部と下部は完全にはブロックしません。これにより、隣接するバーのブロックが干渉しないようになり、タイムマーカーも表示されます(以下を参照)。
  • あくまでも目安として時間を重視しないでください。重要な情報はダウンタイムです。時間よりもテキストを小さくして、分をさらに強調しません。分は明らかに値が時間を示すのに役立ちますので、2、3、4、5などを意味するだけではあまり良くありません。
  • バー全体の時間に個別のマーカーを使用します。目は簡単にドットを接続して上部の時間と関連付けることができるため、水平線(ダウンタイムブロックによってマーカーが消去されない)を横切るだけで済みます。
  • ダウンタイムブロックの上にホバー/クリックしたときにツールチップを使用することにより、正確な時間の表示を可能にします。これを、ダウンタイムのこのブロックまたは問題のサーバーに関する他の関連情報を含めるかリンクする場所として使用します。
  • ツールチップを使用しても、対応するブロックのセクションが表示されることを確認してください。ただし、隣接する行のブロックを隠さないようにしてください。
  • ツールチップの左側を対応するブロックの始点に揃えて、隣接するバーのブロックまたは同じバー内の隣接するブロックと混同されにくくなるようにします。

enter image description here

8
Roger Attrill

あなたは正しい道を進んでいます。色付きの各グラフがサーバーの負荷を表している場合は、サーバーがダウンしている期間をブラックアウトすることで、その情報を表示できます。

設計の混乱は、停止の開始/終了時の垂直線から生じます。ユーザーが停止ブロックの上にカーソルを置いたときに、すべてをツールチップに表示することをお勧めします。

改善の2番目の部分は色分けです。色覚異常になるユーザーの数を予測することはできないため、すべての要素の間に十分なコントラストがあることを確認してください。 (一部の色のコントラストが低いため、私の色の選択はあまり良くありません。)

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

最初のバージョン:
old mockup

4
dnbrv