Google Charts API：将空白行添加到时间轴？

Question

我正在尝试创建一份今天工作的人员列表，以及他们的开始和结束时间。这对有记录的人来说没问题，但我不知道如何让谷歌的时间轴图表打印某人的名字，然后在图表上没有条目。

这是文档，但它没有说明空白条目：

https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow

这是我的代码示例：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Employee' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
            [ 'Spiderman', new Date(2015, 04, 07, 04, 43, 49),  new Date(2015, 04, 07, 06, 45, 05), ],
            [ 'Iron Man',  new Date(2015, 04, 07, 04, 40, 53),  new Date(2015, 04, 07, 08, 45, 47), ],
            [ 'Spiderman',  new Date(2015, 04, 07, 09, 10, 19),  new Date(2015, 04, 07, 13, 22, 02), ],
    ]);

    var options = {
        timeline: {
            singleColor: '#00f',
            colorByRowLabel: true,
            groupByRowLabel: true,
        },
        backgroundColor: '#ffffff'
    };

    chart.draw(dataTable, options);
}
</script>

我需要做什么才能为超人添加一行，即使他那天没有工作？

Answer 1

似乎没有一些内置方法可以将空条目添加到 Google 时间轴。但是您仍然可以通过编写一些额外的代码来删除显示空白行的 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 最小宽度的元素，不管它是否 表示是否为空白条目

Working demo

Answer 2

您可以使用 Google Chart 的 Options 通过为 Style (https://developers.google.com/chart/interactive/docs/roles) 添加 Role 列来设置呈现的系列的样式。

例如

// 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]);

Working demo

注意事项：

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

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

Answer 3

添加到 bugwheels94 响应（因为我无法添加评论）

您可以使用未记录的样式角色为每个条形添加颜色 (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.
};