Javascript 在谷歌图表中使用条形图创建时间线？

我想用谷歌图表创建一个时间表来显示事件的持续时间、重复和重叠。每行应为新事件，列应为时间增量

然而，我一直在查看，看起来我想要的并不是可能的——不仅要排列水平条的长度，而且要在同一行中排列多条（不重叠）

Chrome或其他免费图表库是否可以实现这一点

---

编辑：我想制作一张与下面类似的图表，我100%相信我可以在Google Visualization中重新创建它，但由于一个我无法理解的奇怪行为（标记日期的红线），我觉得有点短。如果你能解决这个问题，其余的都很好，如下所示：

代码如下：

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和3设置为不可见

对于数据，您必须进行一些日期计算（我在Excel中进行了计算，抱歉），但基本上您只需通过减去每个作业的开始/结束日期来获得持续时间，并将虚拟值设置为第二次作业的开始日期减去第一次作业之前的时间加上第一次作业的持续时间

我使用了

{value:x，format:y}

技巧使鼠标盖正常工作。您可以将其自动化（同样，我在excel中完成了数据处理，因为我的javascript将花费更长的时间）

---

然后，设置设置最小日期和最大日期，将系列设置为正确的颜色，并将基线设置为红色。不幸的是，由于我无法理解的原因，无论设定的日期如何，基线都希望位于图表的左侧。如果你能找到解决方法，你就有了你的图表。

你的dateToday超出范围更改为change var dateToday=new Date（2011,7,1），另一个解决方法是我创建一个额外的列，它将是我的dateToday，并设置为new Date（2011,6,1）

改变系列

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

到

我使用谷歌游乐场进行复制

---

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

很高兴我能帮忙。需要一些微调，我问了一个后续问题，希望能解决基线问题。

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

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