是否有任何网络技术可以让我创建类似的可视化？答案

【问题标题】：Is there any web technology that will let me create a similar visualization?是否有任何网络技术可以让我创建类似的可视化？
【发布时间】：2012-12-11 14:47:01
【问题描述】：

我想创建一个时间线。下图：

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

例如：

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

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

【问题讨论】：

标签： web-applications d3.js visualization gnuplot data-visualization

【解决方案1】：

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

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

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

【讨论】：

如果您确实关心 Internet Explorer，请使用 raphael.js。它根据需要创建 SVG，或者，旧 IE 自己的等价物，在 IE6+ 中工作。也可以方便地控制您的 SVG 元素。还有一个绘图插件 gRaphael，它可以为您提供几乎开箱即用的水平堆叠条形图。如果您不关心 IE，D3.js（另一个 SVG 控制器）具有加载很棒的可视化功能。

【解决方案2】：

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

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

或者可能是这样的：

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

【讨论】：

这两个都是很好的答案。 SVG 只是简单一点。感谢您的链接和帮助！ :)
谢谢。 SVG/canvas 显然更灵活。但请注意一些平台限制，例如，stackoverflow.com/a/3890330/1665128