谷歌堆積的條形圖，日期在x和時間y

Question

我試圖創建一個谷歌堆積的條形圖，時間在y軸和日期在x軸上，沒有成功。

例如：2012-05-01我想要一個從00:00到24:00的酒吧。

我已經能夠創建這樣一個簡單的堆積條形圖。

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
    ['2003', 1336060, 400361, 1001582, 997974], 
    ['2004', 1538156, 366849, 1119450, 941795], 
    ['2005', 1576579, 440514, 993360, 930593], 
    ['2006', 1600652, 434552, 1004163, 897127], 
    ['2007', 1968113, 393032, 979198, 1080887], 
    ['2008', 1901067, 517206, 916965, 1056036] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      width:600, height:400, 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Cups"}, 
      isStacked: true} 
    ); 
} 

我想要做到的是這樣的事情

var data = new google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('string', 'Name'); 
data.addColumn('timeofday','Starttime'); 
data.addColumn('timeofday','Endtime'); 

data.addRows{ 
['2015-01-01','Funtime',[13,0,0],[16,0,0], 
['2015-01-01','Boringtime',[16,0,0],[19,0,0], 
['2015-01-02','Sleeptime',[1,0,0],[5,0,0], 
} 

這樣做的結果將是兩間酒吧。在2015年1月1日舉辦兩場比賽，一場是從13:00至16:00（Y軸），另一場是16:00至19:00。 2015-01-02在1:00到5:00之間也會有一場比賽。

我可以用Google條形圖做到這一點嗎？

感謝任何幫助，我可以得到。

Answer 1

有代碼中的幾個問題，你可以檢查瀏覽器的控制檯對這些錯誤

的addRows方法採用陣列中的行的[]，
並應與括號被稱爲()不花括號{}

在陣列內，應該有另一個陣列的每一行從示例
行不完整，缺少最終支架]
['2015-01-01','Funtime',[13,0,0],[16,0,0],
應該
['2015-01-01','Funtime',[13,0,0],[16,0,0]],

2.
的data format不允許string列，第一列
'Funtime'將不得不去以後。 。

3.
如果使用類型'date'爲第一列，那麼就需要在數據實際日期對象
如果 - >data.addColumn('date', 'Date');
使用 - >[new Date('01/01/2016'), [13,0,0], [3,0,0]],

或'string'柱可用於第一列以及
如果 - >data.addColumn('string', 'Date');
使用 - >['2015-01-01', [13,0,0], [3,0,0]],

4.
通知日期格式在此示例中使用 - >'01/01/2016'
使用'2016-01-01'與實際日期將導致問題，如這些...
Google Charts Table displaying incorrect date
How do I align date and values to gridlines in Google Chart?

5.
最後，如果你想時間在y軸和日期X - 軸的BarChart

使用ColumnChart而是看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('timeofday','Starttime'); 
 
    data.addColumn('timeofday','Endtime'); 
 
    data.addRows([ 
 
     [new Date('01/01/2016'), [13,0,0], [3,0,0]], 
 
     [new Date('01/02/2016'), [16,0,0], [3,0,0]], 
 
     [new Date('01/03/2016'), [1,0,0], [4,0,0]] 
 
    ]); 
 

 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
 
    draw(data, { 
 
     height: 600, 
 
     isStacked: true, 
 
     vAxis: { 
 
     format: 'HH:mm', 
 
     viewWindow: { 
 
      min: [0,0,0], 
 
      max: [24,0,0] 
 
     } 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="visualization"></div>