Google图表API：将空行添加到时间轴？ [英] Google Charts API: Add Blank Row to Timeline?

问题描述

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

I'm trying to create a list of people who have worked today, with their start and end times. This is no problem for people who have records, but I can't figure out how to get Google's Timeline chart to print a name of someone and then no entries on graph.

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

Here is the documentation, but it says nothing about blank entries:

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>

我需要做的是为超人添加一行，即使他没有工作天？

What do I need to do to add a row for Superman, even though he didn't work that day?

推荐答案

似乎没有一些内置的方法可以为Google时间轴添加空条目。删除 rect 元素，通过编写一些额外的代码显示空白行

There does not seem to be some built-in way to add null entries to Google Timelines.But still you can remove the rect element which are showing blank row by writing some extra code

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

Step 1 Add start date and end date with same date values for non-working employee so that blue rectangular box would have minimum width.

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

Step 2 Now since your rectangular box corresponding to non-working employee has minimum width. So you can add this code to disappear all rect element with minimum width

(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 元素具有最小宽度无论是否
表示空白条目

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

工作演示

这篇关于Google图表API：将空行添加到时间轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！