谷歌圖表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

似乎沒有被一些內置的方式，以空條目添加到谷歌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 
})(); 

注意：

僅使用此代碼確保有一定的空白條目，因爲它會 永遠消失之後rect元素最小寬度無論是否 代表空白條目

Working demo

Answer 2

添加到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. 
}; 

Answer 3

您可以使用谷歌圖的選項，設置添加一個角色列式（https://developers.google.com/chart/interactive/docs/roles）呈現該系列的風格。

E.g.

// 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

注意事項：

• 你應該用你的實際日期範圍內的存在正在顯示一個虛擬的日期，否則走勢將呈現以適應指定的日期。
• 谷歌圖表列排序有點脆弱。樣式似乎在工作演示中給出的示例中有效，但不適用於其他列排序。它也需要目前的名稱列
• 你可能也想添加一個提示欄，並設置爲不顯示停止工具提示出現的數據根本不存在

我覺得風格角色列非常有用，並推薦它在post render DOM操作上的使用。這也是控制系列顏色的優越方式，因爲其他記錄方法不適用於所有情況。它通常被稱爲「無證風格的角色」，但實際上這裏記錄了https://developers.google.com/chart/interactive/docs/roles。