日付がxでyがyのGoogleスタックバーチャート

Question

y軸上に時間を置き、x軸上に日付を入れたGoogle積み重ね棒グラフを作成しようとしていますが、成功しません。

例：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} 
    ); 
} 

は、この結果は、2つのバーになります。この

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で、1つは2つのイベント、1つは13:00から16:00（y軸）、もう1つは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]],

2.
data formatが
'Funtime'に行く必要があります最初の列の後に、string列を許可していませんする必要があり、最終的なブラケット]
['2015-01-01','Funtime',[13,0,0],[16,0,0],
が欠落しています..

最初の列の型'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.
、あなたはX上のy軸と日付に時間が必要な場合 - 作業スニペット以下
使用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>