スケーラブルなタイムラインで重複するイベントを表示する
Changelogスタイルのデータ表示ツールに加えて、これらの変更がいつ発生したかを視覚化するタイムラインを追加しています。タイムラインは無限に可変である必要があり、ズームアウトしてタイムラインの全長を1日から数か月の間で変更する可能性があります。イベントアイテムは、詳細を表示するために常にクリック可能なままである必要があります。イベントも別のグループに属しているので、色で表示したい。
私は最初に、イベントを表示するために水平バーを使用する単純な1-Dタイムラインを思い付きました。イベントは特定の時点にのみ適用されるため、バーを広くすると、タイムライン上の実際のポインターがより不正確になります。これが、フラグのようなマーカーを思いついた理由です。これらは正確であり、クリック領域も大きくなっています。
さて、私が行き詰まっているのは、いくつかのイベントが互いに非常に接近したとき、特にズームアウトしたときです。ポイントは、区別できなくなるまで一緒にさまよっています。ポインターをマージし、フラグに数字を表示するソリューションは、優れたソリューションであると考えていますが、異なるグループのイベントがマージされると、非常にイライラすることがあります。
私のソリューションは使いやすさの点で十分だと思いますか？他の解決策はありますか？
私はタイムラインの設計に少し経験があります。ここに、あなたが指摘したマルチイベントの問題を解決するそのうちの1つの最終結果があります- Industrial-Heritage または Operation Dynomo 。
ここで何が起こるかというと、重ね順は必要に応じて設定され、異なるズームレベルで再計算されて、より正確な日付が利用できる場合は可能な限りスタックを削除します。
これらの例では、JavaScriptを使用してキャンバス要素をレンダリングし、プロットされたイベントを表します。タイムライン機能を提供することに注意するいくつかのスクリプトがあります。 jqplot 、 D 、 smile widgetsで一般的な課題がどのように克服されたかを確認することをお勧めします および timelinejs 。必要なもののためにかなり長い間オプションを拡張する作業にかなりの時間を費やしました-上記の例ではカスタマイズされたjqPlotが使用されています。
このアプリ以降、近日中にリリースされるため、別のクライアント向けにさらにタイムラインを開発しています。今回は、機能に必要なスクリプトを記述しました。これまでにJavaScriptライブラリを使用したことがある場合、実際には決して使用しない、または前提条件の単一の関数のみを使用する大量のコードが含まれている場合に気づくはずです。数百のライブラリ。
これがいくつかの決定を下すのに役立ち、 ユリウス日 がデータベースに保存できるものよりも前の場合の課題を忘れないでください！
「フラグ」をさまざまな高さに配置できます。十分な高さがある場合、精度の唯一の制限は、イベント間の時間単位の幅が1ピクセル未満になるときです。旗はその極と同じ色でなければなりません。インテリジェント（プログラム）の色選択により、垂直線（極）が接触している場合でもシーケンスを識別できます。同時イベントは、同じ極にある複数のフラグ（ここでは緑のフラグ）で示されています。
ユーザーが複数のイベントスタックが重なる点までズームアウトする場合、タイムラインをタップすると、詳細を表示するための第2レベルのオプションを提供できます。下の画像を参照してください。
したがって、重複する領域を最初にクリックすると、その期間のすべてのイベントスタックが色分けされたアイコンで一列に表示され、それらのアイコンのいずれかをクリックしてさらに詳しく調べることができます。