1

我想创建一个时间线。下面附上图片： 在此处输入图像描述

显示我想要可视化的内容。我想要一个时间线，它以开始和停止时间作为输入事件。如果事件是一种类型，则线用一种颜色着色，如果它是另一个特定事件，则另一种颜色。

例如：

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

如果这种可视化技术的确切名称是什么？我在哪里可以在网页上动态找到/创建一个？我简要地查看了 d3，但最初我没有看到任何允许在混合条形图之外进行这种可视化的东西。我也考虑过 gnu plot，但不确定如何在事件发生时将条形翻转并重复模式。

4

2 回答 2

1

好吧，如果你不关心 IE8，你总是可以使用 SVG 或画布。这些都有相当陡峭的学习曲线，但结果很难争论。

巧合的是，您可以使用 HTML、JavaScript 和 CSS 的 Web 三位一体来完成此操作。只需为每个数据段设置一个 div，为每个数据指定一个固定的或百分比，并使用 JavaScript 进行管理。再一次，你必须让你的手在这里“书呆子”，但这是可以做到的。但是，该实现有点超出了快速堆栈溢出答案的范围。

我还使用了一些 jQuery 图形插件，但我不确定它们是否适合您的特定用例。

于 2012-12-11T05:45:49.383 回答
1

一个 HTML5 之前的解决方案是一堆并排放置的 div，带有渐变或图像（带有重复-x）背景。您的垂直线也可以是 div。简单，跨浏览器，可以在服务器上，但需要一些手动实现。

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

或者可能是这样的：

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

于 2012-12-11T06:40:58.723 回答