Google 图表 API：向时间轴添加空白行？

Question

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

这是文档，但未提及空白条目：

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 Timelines.But 中，但您仍然可以删除显示空白行的 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
})();

注意：

Only use this code after making sure that there is some blank entry as it will always disappear rect element with minimum width no matter whether it represents blank entry or not

Working demo

Answer 2

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

您可以使用未记录的样式角色为每个栏添加颜色 (http://jsfiddle.net/re4qo6gs/) 并使用特定颜色使您的 "dummy" 栏删除。

修改他的代码。

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.
};

Answer 3

您可以使用 Google 图表的选项通过为样式添加角色列来设置呈现的系列的样式 (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]);

Working demo

注意事项：

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

我发现 Style Role Column 非常有用，并建议将其用于 post 呈现 DOM 操作。这也是控制系列颜色的最佳方式，因为其他记录的方法并不适用于所有情况。它通常被称为 "undocumented style role" 但实际上它记录在此处 https://developers.google.com/chart/interactive/docs/roles .

Google 图表 API：向时间轴添加空白行？

Google Charts API: Add Blank Row to Timeline?

javascript

charts

google-api