用於甘特圖的JavaScript/jQuery庫，如圖表

我需要創建堆棧條形圖，以顯示一天中的引擎狀態。下面是我想什麼有例如：用於甘特圖的JavaScript/jQuery庫，如圖表

enter image description here

它看起來像一個甘特圖，但可能比正常的甘特圖簡單得多。 我正在尋找支持這種圖表的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時隙之間的時隙是當發動機處於關閉狀態。

一直在尋找這個很長時間。任何建議將大大appreaciated！

來源

2012-07-16 sozhen

您是否試過[highcharts]（http://www.highcharts.com/demo/column-stacked）或[fusioncharts]（http://www.fusioncharts.com/demos/gallery /＃堆積圖表）？ – poncha 2012-07-16 08:17:16

@poncha，我嘗試了highcharts，但不支持這種圖表，所以創建一個像這樣的圖表會有點棘手。我不喜歡使用FusionCharts，因爲它只支持免費版本的Flash。謝謝。 – sozhen 2012-07-16 13:32:29

你可以創建沒有圖例的堆疊酒吧，並單獨創建圖例（如果多數民衆贊成在這個問題）... – poncha 2012-07-16 13:37:35

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

也許你可以修改BarChart example，這樣它會在y軸上顯示時間。

如果您決定編寫自己的控件，然後像Raphael這樣的庫將幫助你很多。

不管怎麼說，這似乎是相當簡單的控制，所以沒有任何需要外部的依賴到Flash，Silverlight的等

來源

2012-08-03 06:25:11 Tx3

感謝您提供一些見解，我現在正在使用Highcharts做我想做的，雖然它可能不是一個好的選擇，當輸入數據變大，因爲我是使用散點圖來做到這一點，而Highcharts對大數據並不擅長，我提出了我的問題[** here **]（http://highslide.com/forum/viewtopic.php?f=9&t= 19043＆hilit = gantt），如果你感興趣的話可以看一看，因爲你看到服務器返回的數據集，可能需要對JavaScript中的所需數據集進行大量的數據操作foVis工具包。 – sozhen 2012-08-03 06:35:25

我仍然沒有使用JIT，也不確定是否需要日期時間數據。 – sozhen 2012-08-03 06:37:57

你可以嘗試Flot其中有一個漂亮的Gantt chart plugin。

實施例的數據：

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"]

第一個參數是步驟的開始。
其次是資源數量。
三是結束步驟。
第四個描述步驟的名稱（用於工具提示）。

來源

2012-08-03 06:36:31 osoner

它的數據插件的格式是什麼？我調查了幾分鐘，但無法弄清楚。謝謝。 – sozhen 2012-08-03 06:47:24

我自己並沒有使用甘特圖（儘管我一直在使用Flot），但從甘特圖的例子中，我已經給答案添加了一個示例數據。 – osoner 2012-08-03 07:16:36

我正在研究jqplot的時間軸功能。 http://www.jqplot.com/

我有一個的jsfiddle在這裏一個例子：http://jsfiddle.net/NVbjv/8/

它在進行的工作，我需要弄清楚一些事情。如果您想了解更多信息，請在這裏查看我的一些問題在計算器上。我希望能夠在某種插件中發展它。（display pointlabel in highlighter jqplot,jqplot text labels on y-axis）

來源

2012-08-03 07:31:58 Jeroen

用於甘特圖的JavaScript/jQuery庫，如圖表

回答

相關問題