1

タイムラインを作ってみたいと思います。次の添付画像: ここに画像の説明を入力

私が視覚化しようとしているものを示しています。開始時刻と終了時刻を含む入力イベントを受け取るタイムラインが必要です。イベントが 1 つのタイプである場合、線は 1 つの色で色付けされ、別の特定のイベントである場合は別の色で色付けされます。

例えば：

starttime  |  event
-----------------------
8AM        |   cold
11AM       |   hot
12:30PM    |   cold
1PM        |   hot
1:45PM     |   cold
4PM        |   hot

この視覚化手法の正確な名前は? また、Web ページのどこで動的に検索/作成できますか? d3 を簡単に調べましたが、ハイブリッド棒グラフ以外でそのような視覚化を可能にするものは最初は見当たりませんでした。gnu プロットについても考えましたが、イベントが発生したときにバーを横にしてパターンを繰り返す方法がわかりません。

4

2 に答える 2

1

HTML5 以前のソリューションの 1 つは、グラデーションまたは画像 (repeat-x を使用) を背景に並べて配置した div の束です。垂直線もdivにすることができます。シンプルなクロスブラウザーで、サーバー上に配置できますが、手動で実装する必要があります。

例: http://alignedleft.com/tutorials/d3/drawing-divs/

または、次のようなものかもしれません。

http://trickyscripter.com/examples/after/jsgraphics_e.htm

于 2012-12-11T06:40:58.723 に答える
1

まあ、IE8 を気にしなければ、いつでも SVG やキャンバスを使うことができます。これらにはかなり急な学習曲線が伴いますが、その結果について議論するのは困難です.

偶然にも、これは HTML、JavaScript、および CSS の Web 三位一体で実現できます。データのセグメントごとに 1 つの div を設定し、それぞれに固定またはパーセンテージを指定して、JavaScript で管理するだけです。繰り返しになりますが、ここで手を「オタク」にする必要がありますが、それは可能です。ただし、実装は、クイックスタックオーバーフローの回答の範囲を少し超えています。

私はいくつかの jQuery グラフ作成プラグインも使用しましたが、それらのどれもがあなたの特定のユース ケースに適合するかどうかはわかりません。

于 2012-12-11T05:45:49.383 に答える