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

，我使用谷歌游乐场复制。

您的日期有一个问题是时间戳？