Google сложенная гистограмма с датой на x и временем по y

Question

Я пытаюсь создать гистограмму Google с графиком со временем по оси Y и дату по оси x, без успеха.

Ex: на 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-01-01 с двумя событиями один, начиная с 13:00 до 16:00 (по оси Y), а также поверх этого с 16:00 до 19:00. В 2015-01-02 также будет одно событие с 1:00 до 5:00.

Могу ли я сделать это с помощью диаграмм Google?

Цените любую помощь, которую я могу получить.

Answer 1

есть несколько проблем в вашем коде, вы можете проверить консоль браузера для этих ошибок

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.
наконец, если вы хотите время на оси у и дата на х - ось
использование ColumnChart вместо BarChart

см следующий рабочий фрагмент кода ...

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>