Question

我试图创建一个谷歌堆积条形图，其中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也会有一个活动。

我能用谷歌条形图做到这一点吗？

感谢我能得到的任何帮助。

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'，则需要数据中的实际日期对象
if - ＆gt; data.addColumn('date', 'Date');
使用 - ＆gt; [new Date('01/01/2016'), [13,0,0], [3,0,0]],

或'string'列也可用于第一列 if - ＆gt; data.addColumn('string', 'Date');
使用 - ＆gt; ['2015-01-01', [13,0,0], [3,0,0]],

<强> 4
注意本例中使用的日期格式 - ＆gt; '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轴上的日期
使用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>

谷歌堆积条形图，日期为x，时间为y

1 个答案: