Google Charts API:向时间线添加空白行? [英] Google Charts API: Add Blank Row to Timeline?

查看:13
本文介绍了Google Charts API:向时间线添加空白行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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/图表/交互式/文档/画廊/时间线#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 步 现在,由于与非工作员工对应的矩形框具有最小宽度.因此,您可以添加此代码以消除所有具有最小宽度

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 Charts API:向时间线添加空白行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆