在Google Charts中使用条形图创建时间轴？ [英] Creating a timeline with a bar chart in Google Charts?

问题描述

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

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.

我一直在查看 Google Charts docs ，看起来并不像我想要的那样 - 不仅仅是水平条的长度可以是范围，但是在同一行中有多个范围条（不重叠）。

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).

这可以通过Chrome或其他免费图表库实现吗？

Is this possible with Chrome or another free chart library?

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

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

推荐答案

我有100％的自信我可以在谷歌可视化中重新创建这个，但我摔倒了由于我无法弄清楚的奇怪行为（标记日期的红线），我们有点短。如果你可以解决这个问题，其余的工作很好，看起来像这样：

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:

以下是代码：

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个系列：

Basically, you create 4 series:

1. 虚拟系列（第一次作业前的时间）


2. 第一次作业的持续时间


3. Dummy系列（第一次和第二次分配之间的时间）


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

Then you set series 1 and 3 to be invisible.

对于数据，你必须做一些日期数学（我在Excel中做过，道歉），但基本上你只是通过减去每个分配的开始/结束日期来获得持续时间，并将虚拟设置为第二个分配的开始日期减去第一个分配的时间加上第一个分配的持续时间。

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.

我使用 {value：x，format：y} 技巧使鼠标悬停正常工作。你可以自动执行此操作（再次，我在Excel中执行数据操作，因为我的javascript会花费更长时间）。

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).

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

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.

这篇关于在Google Charts中使用条形图创建时间轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！