问题
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:
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.
My data would be in this format:
[
{
"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.
Have been looking for this for long. Any suggestion would be greatly appreaciated!
回答1:
You could use JavaScript InfoVis Toolkit or make your own custom renderer.
Maybe you could modify BarChart example, so that it would display time in y-axis.
If you decide to write your own control then library like Raphael will help you a lot.
Anyways, it seems to be quite simple control, so there isn't any need for external dependencies to Flash, Silverlight etc.
回答2:
You can try Flot which has a good looking Gantt chart plugin.
Example data:
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"]
]
From plugin specification:
var data = [
[Date.UTC(2010,0,25,12,45),1,Date.UTC(2010,0,25,13,15],"Name of Step"]
- First Parameter is Start of Step.
- Second is number of resource.
- Third is End of step.
- Fourth describes Name for step (used for tooltip).
回答3:
I'm working on a timeline feature for jqplot. http://www.jqplot.com/
I've a JsFiddle with an example here: http://jsfiddle.net/NVbjv/8/
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 )
来源：https://stackoverflow.com/questions/11500211/javascript-jquery-library-for-gantt-like-chart