用于甘特图表的JavaScript / jQuery库

我需要创建一个堆积条形图，显示一天中的引擎状态。 以下是我想要的例子：

它看起来像甘特图，但可能比普通的甘特图简单得多。 我很难找到支持这种图表的JavaScript / jQuery图表库。 我知道很多甘特图库，但想知道哪个库有我想要的图表的选项/设置。

我的数据将采用以下格式：

[ { "day": "2009-07-13", "work": ["11:16:35-12:03:12", "12:32:48-13:26:28", "13:39:09-13:39:12", "13:41:03-13:41:05", "14:18:09-24:00:00"] }, { "day": "2009-07-14", "work": ["00:00:00-07:22:25", "07:22:25-07:22:28", "10:10:04-10:10:31", "10:10:32-10:15:33", "10:18:07-10:21:19", "11:04:49-11:06:15", "11:12:50-11:19:05", "11:19:11-11:19:19", "11:45:50-11:51:42", "11:51:43-11:53:55", "14:03:13-14:13:04", "14:23:55-14:31:28", "14:31:28-14:38:00", "14:38:00-14:49:04", "16:34:56-16:44:33", "16:46:37-16:48:10", "16:48:11-24:00:00"] }, { "day": "2009-07-15", "work": ["00:00:00-08:16:23", "09:57:57-10:15:05"] }, { "day": "2009-07-16", "work": ["10:02:40-10:05:56", "10:07:16-10:09:26", "10:09:27-10:09:28", "13:18:31-24:00:00"] }, { "day": "2009-07-17", "work": ["00:00:00-08:56:41", "16:07:58-16:08:23"] }, { "day": "2009-07-20", "work": ["14:44:47-14:48:35", "15:09:14-16:47:06", "16:47:05-16:47:10", "16:47:13-16:47:15", "16:47:16-16:47:20"] }, { "day": "2009-07-21", "work": ["10:52:51-16:37:07"] }, { "day": "2009-07-24", "work": ["14:54:38-16:03:07", "16:16:23-16:35:14", "16:35:17-16:41:22", "16:43:37-23:56:37"] }, { "day": "2009-07-25", "work": ["20:36:34-21:24:28", "21:24:43-23:45:53"] }, { "day": "2009-07-26", "work": ["13:46:59-18:09:09"] }, { "day": "2009-07-28", "work": ["13:48:30-13:51:10", "13:51:18-13:51:27", "13:52:17-14:57:31"] }, { "day": "2009-07-29", "work": ["14:50:15-14:50:16", "15:36:17-15:43:51", "15:53:31-16:29:30", "16:57:50-23:07:28"] }, { "day": "2009-07-30", "work": ["11:25:29-11:41:32", "16:06:37-16:33:09", "21:14:04-21:20:18", "21:53:57-22:18:59"] } ] 

work属性时隙是发动机工作时， work时隙之间的插槽是发动机关闭的时间。

一直在寻找这个。 任何建议都会受到很大的影响！

Answer 1

您可以使用JavaScript InfoVis Toolkit或制作自己的自定义渲染器。

也许您可以修改BarChart示例 ，以便在y轴上显示时间。

如果您决定编写自己的控件，那么Raphael这样的库会对您有所帮助。

无论如何，它似乎是非常简单的控制，因此不需要外部依赖Flash，Silverlight等。

Answer 2

您可以尝试Flot ，它具有漂亮的甘特图插件 。

示例数据：

 var d1 = [ [Date.UTC(2010, 0, 1, 11, 23), 5, Date.UTC(2010, 0, 1, 11, 25), "Put Water into Pot"], [Date.UTC(2010, 0, 1, 11, 35), 5, Date.UTC(2010, 0, 1, 11, 47), "Clean Cooker"], [Date.UTC(2010, 0, 1, 11, 25), 4, Date.UTC(2010, 0, 1, 11, 27), "Put Pot on Cooker"] ] 

从插件规范 ：

 var data = [ [Date.UTC(2010,0,25,12,45),1,Date.UTC(2010,0,25,13,15],"Name of Step"] 

• 第一个参数是步骤开始。
• 第二是资源数量。
• 第三步是结束。
• 第四个描述步骤的名称（用于工具提示）。

Answer 3

我正在研究jqplot的时间轴function。 http://www.jqplot.com/

我在这里有一个JsFiddle示例： http ： //jsfiddle.net/NVbjv/8/

它仍然在进行中，我需要弄清楚一些事情。 如果您想了解更多，请在stackoverflow上查看我的一些问题。 我希望能够在一些插件中进化它。 （ 在荧光笔jqplot中显示pointlabel ， 在y轴上 显示jqplot 文本标签 ）