在Google圖表中使用條形圖創建時間軸？

Question

我想用Google圖表創建一個時間表，以顯示事件的持續時間，重複和重疊。每行應該是一個新事件，列應該是時間的增量。

但是，我一直在尋找Google Charts docs，它看起來並不像我想要的那樣 - 不僅可以測量水平條的長度，而且可以使多個測距條相同行（不重疊）。

Chrome或其他免費圖表庫可以實現這種功能嗎？

編輯：我想產生類似下面

Answer 1

一個我是100％的信心，我可以在谷歌可視化創建此圖表，但我倒一丁點短期因奇怪的行爲，我可以不知道（標記日期的紅線）。如果你能解決這個問題，其餘的偉大工程，是這樣的：

下面是代碼：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Assignment'); 
    data.addColumn('date', 'Dummy'); 
    data.addColumn('date', 'Current Assignment'); 
    data.addColumn('date', 'Dummy'); 
    data.addColumn('date', 'Next Assignment'); 
    data.addRows([ 
    ['Uranus', new Date(1298246400000), {v:new Date(26092800000), f:'2/21-12/20'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}], 
    ['Thomas Lamonthezie', new Date(1297036800000), {v:new Date(6393600000), f:'2/7-4/22'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}], 
    ['Shuo Li', new Date(0), {v:new Date(0), f:'1/0-1/0'}, new Date(1303689600000), {v:new Date(2937600000), f:'4/25-5/29'}], 
    ['Saturne', new Date(1298246400000), {v:new Date(4579200000), f:'2/21-4/15'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}], 
    ['Roger Erwin', new Date(1301875200000), {v:new Date(1555200000), f:'4/4-4/22'}, new Date(259200000), {v:new Date(2160000000), f:'4/25-5/20'}], 
    ['Rick Maverick', new Date(1302652800000), {v:new Date(2592000000), f:'4/13-5/13'}, new Date(0), {v:new Date(0), f:'1/0-1/0'}], 
    ]); 

    //Define date ranges for the chart 
    var dateMin = new Date(2010,11,1); 
    var dateMax = new Date(2012,0,1); 
    var dateToday = new Date(2012,3,15); 


    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
    draw(data, 
     {width:600, height:400, 
      isStacked: true, 
      series: [{color: 'transparent'},{},{color: 'transparent'},{}], 
      hAxis: { 
      viewWindow: { 
       max: dateMax, 
       min: dateMin, 
      }, 
      baseline: dateToday, 
      baselineColor: 'red', 
      }, 
     } 
     ); 
} 

基本上，你創建4個系列：

1. 虛擬系列（第一次分配之前的時間）
2. 第一次分配的持續時間
3. 假人系列（在第一和第二指派之間的時間）的第二分配

然後，設置系列1的

持續時間和3是無形的。

對於數據，你必須做一些日期數學（我在Excel中做過，道歉），但基本上你只是通過減去每個任務的開始/結束日期來獲得持續時間，並將假人設置爲開始第二次分配的日期減去第一次分配的時間加上第一次分配的持續時間。

我使用{value: x, format: y}技巧來使鼠標懸停正常工作。你可以自動執行此操作（再次，我在Excel中做了數據，因爲我的JavaScript會花費更長的時間）。

然後，設置設置最小日期，最大日期，將系列設置爲適當的顏色，並將基線設置爲紅色。不幸的是，由於我理解範圍之外的原因，無論設定的日期是什麼，基線都希望生活在圖表的左側。如果你能找到解決辦法，你就有你的圖表。

Answer 2

您的dateToday超出範圍更改var dateToday =新日期（2011,7,1），另一個解決方法我創建一個額外的列，這將是我datetoday並設置爲新日期（2011,6， 1）

data.addColumn('string', 'Assignment'); 
data.addColumn('date', 'Dummy'); 
data.addColumn('date', 'Current Assignment'); 
data.addColumn('date', 'Dummy'); 
data.addColumn('date', 'Next Assignment'); 
data.addColumn('date', 'Date of Report'); 
data.addRows([ 
['Uranus', new Date(1298246400000), {v:new Date(26092800000), f:'2/21-12/20'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1) ], 
['Thomas Lamonthezie', new Date(1297036800000), {v:new Date(6393600000), f:'2/7-4/22'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1) ], 
['Shuo Li', new Date(0), {v:new Date(0), f:'1/0-1/0'}, new Date(1303689600000), {v:new Date(2937600000), f:'4/25-5/29'},new Date(2011,6,1)], 
['Saturne', new Date(1298246400000), {v:new Date(4579200000), f:'2/21-4/15'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1)], 
['Roger Erwin', new Date(1301875200000), {v:new Date(1555200000), f:'4/4-4/22'}, new Date(259200000), {v:new Date(2160000000), f:'4/25-5/20'},new Date(2011,6,1)], 
['Rick Maverick', new Date(1302652800000), {v:new Date(2592000000), f:'4/13-5/13'}, new Date(0), {v:new Date(0), f:'1/0-1/0'},new Date(2011,6,1)], 
]); 

變化的系列

series: [{color: 'transparent'},{},{color: 'transparent'},{}] 

到

series: [{color: 'transparent'},{},{color: 'transparent'},{},{type: "line"}] 

，我使用谷歌遊樂場複製。

您的日期有一個問題是時間戳？