在Google Charts中使用条形图创建时间轴？

Question

我想用Google图表创建一个时间轴,以显示事件的持续时间,重复次数和重叠次数.每行应该是一个新事件,列应该是时间的增量.

我一直在查看Google Charts文档,但它看起来并不像我想要的那样 - 不仅要有一个水平条的长度,而且要在同一行中有多个远程条(非重叠).

这可以通过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. 虚拟系列(第一次和第二次分配之间的时间)
4. 第二次任务的持续时间

然后将系列1和3设置为不可见.

对于数据,你必须做一些日期数学(我在Excel中做过,道歉),但基本上你只需通过减去每个作业的开始/结束日期来获得持续时间,并将假设为第二个的开始日期赋值减去第一次赋值的时间加上第一次赋值的持续时间.

我使用这个{value: x, format: y}技巧使鼠标悬停正常工作.你可以自动化这个(再次,我在excel中做了数据,因为我的javascript会花费更长的时间).

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