javascript 在 Google Charts 中创建带有条形图的时间线？

Creating a timeline with a bar chart in Google Charts?

提问by mowwwalker

I would like to create a timeline with Google charts to show the duration, repetition, and overlap of events. Each row should be a new event and the columns should be increments of time.

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

I've been looking over the Google Charts docs, however, and it doesn't look like what I want is possible - to not only have the length of a horizontal bar be ranged, but to have multiple ranged bars in the same row (non-overlapping).

然而，我一直在查看Google Charts 文档，但它看起来不像我想要的那样 - 不仅要设置水平条的长度，而且要在同一行中有多个范围的条（不重叠）。

Is this possible with Chrome or another free chart library?

Chrome 或其他免费图表库可以做到这一点吗？

edit: I would like to produce a chart similar to the one below

编辑：我想制作一个类似于下面的图表

回答by jmac

I was 100% confident I could recreate this in Google Visualization, but I fell a wee bit short due to an odd behavior I can't figure out (the red line marking the date). If you can solve that issue, the rest works great and looks like this:

我 100% 有信心我可以在 Google Visualization 中重新创建它，但由于我无法弄清楚的奇怪行为（标记日期的红线），我有点短。如果你能解决这个问题，剩下的就很好用，看起来像这样：

Here is the code:

这是代码：

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',
          },
         }
        );
}

Basically, you create 4 series:

基本上，您创建了 4 个系列：

1. Dummy series (time until the first assignment)
2. Duration of the first assignment
3. Dummy series (time between the first and second assignment)
4. Duration of the second assignment

1. 虚拟系列（直到第一次分配的时间）
2. 第一次分配的持续时间
3. 虚拟系列（第一次和第二次分配之间的时间）
4. 第二次任务的持续时间

Then you set series 1 and 3 to be invisible.

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

For the data, you have to do some date math (I did it in Excel, apologies), but basically you just get the duration by subtracting the start/end date for each assignment, and set the dummy as the start date of the second assignment minus time until the first assignment plus the duration of the first assignment.

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

I used the {value: x, format: y}trick to make the mouseover work properly. You can automate this (again, I did the data stuff in excel as my javascript would have taken significantly longer).

我用这个{value: x, format: y}技巧使鼠标悬停正常工作。您可以自动执行此操作（同样，我在 excel 中处理数据，因为我的 javascript 会花费更长的时间）。

Then the settings set the minimum date, the maximum date, turn the series to be the proper colors, and set the baseline to red. Unfortunately, for reasons beyond my understanding, the baseline no matter the date set wants to live on the left side of the chart. If you can find a way around that, you have your chart.

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

回答by Juan Solares

your dateToday is out of range change to change var dateToday = new Date(2011,7,1), another workaround i create a extra column, that will be my datetoday and is set to new Date(2011,6,1)

您的 dateToday 超出范围更改更改 var dateToday = new Date(2011,7,1)，另一种解决方法我创建了一个额外的列，这将是我的今天的日期并设置为 new Date(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)],
]);

change the series

改变系列

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

to

到

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

and i use google playground to replicate.

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

One question your dates are timestamp?

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