谷歌图表API:添加空白行到时间线

似乎没有任何内置的方法可以将空条目添加到Google Timelines。但是，您仍然可以通过编写一些额外的代码来删除显示空行的rect元素

步骤1为非工作员工添加具有相同日期值的开始日期和结束日期，以便蓝色矩形框的宽度最小。

步骤2现在，由于非工作员工对应的矩形框的宽度最小。因此，您可以添加此代码以消除具有最小宽度的所有rect元素

(function(){                                            //anonymous self calling function to prevent variable name conficts
    var el=container.getElementsByTagName("rect");      //get all the descendant rect element inside the container      
    var width=100000000;                                //set a large initial value to width
    var elToRem=[];                                     //element would be added to this array for removal
    for(var i=0;i<el.length;i++){                           //looping over all the rect element of container
        var cwidth=parseInt(el[i].getAttribute("width"));//getting the width of ith element
        if(cwidth<width){                               //if current element width is less than previous width then this is min. width and ith element should be removed
            elToRem=[el[i]];
            width=cwidth;                               //setting the width with min width
        }
        else if(cwidth==width){                         //if current element width is equal to previous width then more that one element would be removed
            elToRem.push(el[i]);        
        }
    }
    for(var i=0;i<elToRem.length;i++) // now iterate JUST the elements to remove
        elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
})();

注意：

只有在确保有一些空白条目后才能使用此代码总是以最小宽度消失rect元素，无论它是否表示空白条目或不是

工作演示

您可以使用Google Chart的Options来设置渲染系列的样式，方法是为style添加Role列(https://developers.google.com/chart/interactive/docs/roles)。

例如

// original column definitions...
// be sure to configure columns correctly (see comments below)
dataTable.addColumn({ type: 'string', role: 'style' }); 
// ...
// after adding other rows
// ...
// create a style option to set opacity to 0
let blankStyle = "opacity: 0";
// use some default date for date columns
let defaultDate = someDefaultDate;
dataTable.addRow(['Superman', blankDate, blankDate, blankStyle]);

工作演示

需要注意的事项：

• 您应该使用实际显示日期范围内的虚拟日期，否则图表将根据指定日期进行呈现
• 谷歌图表的列排序有点脆弱。样式似乎适用于工作演示中给出的示例，但不适用于其他列排序。它还需要显示"名称"列
• 您可能还想添加一个工具提示列，并将其设置为不显示，以停止为不存在的数据显示工具提示

我发现样式角色列非常有用，并建议将其用于渲染后DOM操作。这也是控制系列颜色的优越方法，因为其他记录在案的方法并不适用于所有情况。它通常被称为"未记录的风格角色"，但事实上它在这里有记录https://developers.google.com/chart/interactive/docs/roles。

添加到bugwels94响应（因为我无法添加注释）

您可以使用未记录的样式角色为每个条形图添加一种颜色（http://jsfiddle.net/re4qo6gs/），并使用某种颜色来制作要删除的"假"条。

修改他的代码。

for(var i=0;i<elToRem.length;i++){ // now iterate JUST the elements to remove
  if (elToRem.getAttribute("fill") == "#YourDUMMYColor"){  
    elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
    elToRem[i].setAttribute("stroke","none"); // Also remove the stroke added by the style.
};