JavaScript / jQuery库的甘特图 [英] JavaScript / jQuery library for gantt like chart
问题描述
我需要创建一个堆叠条形图，显示一天中的引擎状态。这里是我想要的例子：
I need to create a stacked bar chart showing the engine status in a day. Here is the example of what I would like to have:
它看起来像一个甘特图，但可能比正常的甘特图简单得多。 我正在寻找一个支持这种图表的JavaScript / jQuery图表库。我知道很多甘特图库可用，但想知道哪个库有我想要的图表的选项/设置。
It looks like a gantt chart, but probably much simpler than a normal gantt chart. I am badly looking for a JavaScript/jQuery charting library which supports this kind of chart. I know lots of gantt chart library available, but wondering which library have the option/setting for the chart I want.
我的资料格式如下：
[
{
"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"]
}
]
工作属性时间段是当引擎工作时，工作时间插槽是当发动机关闭时。
The work attribute time slot is when the engine is working, the slots between work time slots is when the engine is off.
一直在寻找这个。
推荐答案
我正在使用jqplot的时间轴功能。 http://www.jqplot.com/
I'm working on a timeline feature for jqplot. http://www.jqplot.com/
我有一个JsFiddle有一个例子： http://jsfiddle.net/NVbjv/8/
I've a JsFiddle with an example here: http://jsfiddle.net/NVbjv/8/
它仍在进行中，我需要弄清楚几件事情。在stackoverflow，看看我的一些问题，如果你想了解更多。我希望能够在一个插件的某些进化。
（在荧光笔jqplot 中显示点标签， yq轴上的jqplot文字标签）
It's still work in progress and I need to figure out a few things. Take a look at some of my questions here at stackoverflow if you like to learn more. I hope to be able to evolve it in somekind of a plug-in. ( display pointlabel in highlighter jqplot , jqplot text labels on y-axis )
这篇关于JavaScript / jQuery库的甘特图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
