日時

  1. Overview
  2. 日付コンストラクタを使用した日付と時刻の取得
  3. 日付、時刻、タイムゾーン
  4. 日付文字列表現を使用した日付と時刻
  5. Timeofday を使用する
  6. 軸ラベル、グリッド線ラベル、目盛りラベルの書式設定
  7. JavaScript の日付に関する詳細情報

概要

DataTable 列データ型 date と datetime は、組み込みの JavaScript Date クラスを利用します。

重要: JavaScript の Date オブジェクトでは、月は 0 から 11 までのインデックスが付きます（1 月が 0 か月、12 月が 11 か月）。

日付コンストラクタを使用した日付と時刻

日付コンストラクタを使用した日付

新しい Date オブジェクトを作成するには、日付の構成要素を指定するための引数を指定して、new キーワードを指定して Date() コンストラクタを呼び出します。これらの引数は、日付のさまざまなプロパティに対応するいくつかの数値の形式を取ります。

new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)

date データ型で Date コンストラクタを使用する場合、指定する必要があるのは年、月、日のみです。

Date コンストラクタには new Date(Milliseconds) という形式も使用できます。Miliseconds は、1970 年 1 月 1 日 00:00:00 UTC から目的の日付までの距離をミリ秒単位で表したものです。この日付より前の日時については、負のミリ秒数が指定されます。

Date コンストラクタは、addColumn()、addRow()、addRows() メソッドや、arrayToDataTable() メソッドを使用して DataTable を手動で作成する場合に便利です。ただし、JSON を使用してデータを指定する場合は文字列表現を使用する必要があります。

JavaScript の日付コンストラクタは、引数として日付の文字列表現を受け入れることもできます。この文字列にはいくつかの形式があります。最も信頼性の高い形式は、RFC 2822 仕様または ISO 8601 仕様に準拠しています。形式は次のとおりです。

  • RFC 2822 - 'MMM DD, YYYY' または 'DD MMM, YYYY'（例: new Date('Jan 1, 2015') または new Date('1 Jan, 2015')）
  • ISO 8601 - 'YYYY-MM-DD'（例: new Date('2015-01-01')）

警告: Date コンストラクタの文字列表現は、ブラウザやブラウザのバージョンによって解析方法が異なるため、同じ文字列でも異なる日付を返す場合があります。そのため、日付コンストラクタに文字列を渡すことはおすすめしません。代わりに、日付コンストラクタの引数には数値のみを使用することをおすすめします。

以下のタイムラインは、2000 年以降の NFL の各シーズンのスーパーボウル チャンピオンを示しています。


以下は、このタイムラインを作成するためのコードです。new Date() コンストラクタを使用していることと、各日付に示された数値に 0 から始まる月を使用していることに注目してください。

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Team');
      data.addColumn('date', 'Season Start Date');
      data.addColumn('date', 'Season End Date');

      data.addRows([
        ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5)],
        ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
        ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
        ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
        ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2005, 8, 5), new Date(2006, 1, 5)],
        ['Indianapolis Colts',   new Date(2006, 8, 5), new Date(2007, 1, 5)],
        ['New York Giants',      new Date(2007, 8, 5), new Date(2008, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2008, 8, 5), new Date(2009, 1, 5)],
        ['New Orleans Saints',   new Date(2009, 8, 5), new Date(2010, 1, 5)],
        ['Green Bay Packers',    new Date(2010, 8, 5), new Date(2011, 1, 5)],
        ['New York Giants',      new Date(2011, 8, 5), new Date(2012, 1, 5)],
        ['Baltimore Ravens',     new Date(2012, 8, 5), new Date(2013, 1, 5)],
        ['Seattle Seahawks',     new Date(2013, 8, 5), new Date(2014, 1, 5)],
      ]);

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

日付コンストラクタを使用した日時

DataTable の datetime 列データ型は date データ型と同じ Date コンストラクタを使用しますが、すべての引数を使用して時間を入力するようになりました。

または、datetime の文字列表現を Date コンストラクタに渡すこともできます。datetime の文字列表現は、4 桁のタイムゾーン オフセットと、時間、分、秒を加えたものです（例: 太平洋標準時（PST）は -0800）。RFC 2822 仕様では、時刻とタイムゾーンが追加され、日付と時刻の間にスペースが追加され、時刻とタイムゾーンの間にスペースが追加されます。ISO 8601 仕様では、スペースは使用せず、代わりに日付の後に時間コンポーネントを示す大文字の「T」が続きます。また、時刻とタイムゾーン オフセットの間にスペースを入れません。2014 年 12 月 6 日午前 10 時 30 分（太平洋標準時）の datetime の完全な日付文字列は次のようになります。

  • RFC 2822 - Dec 6, 2014 10:30:00 -0800
  • ISO 8601 - 2014-12-06T10:30:00-0800。

警告: 繰り返しになりますが、文字列表現の解析はブラウザやバージョンによって異なる場合があります。特に、時刻とタイムゾーンを扱う場合、日時を UTC（GMT）タイムゾーンで返すか、オフセットして現地時間で返すかに違いがあります。これが、日時文字列の使用が推奨されない理由の一つです。

以下のタイムラインは、datetime データ型を使用して平均的な 1 日の内訳を示しています。

 
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Activity', 'Start Time', 'End Time'],
        ['Sleep',
         new Date(2014, 10, 15, 0, 30),
         new Date(2014, 10, 15, 6, 30)],
        ['Eat Breakfast',
         new Date(2014, 10, 15, 6, 45),
         new Date(2014, 10, 15, 7)],
        ['Get Ready',
         new Date(2014, 10, 15, 7, 4),
         new Date(2014, 10, 15, 7, 30)],
        ['Commute To Work',
         new Date(2014, 10, 15, 7, 30),
         new Date(2014, 10, 15, 8, 30)],
        ['Work',
         new Date(2014, 10, 15, 8, 30),
         new Date(2014, 10, 15, 17)],
        ['Commute Home',
         new Date(2014, 10,  15, 17),
         new Date(2014, 10,  15, 18)],
        ['Gym',
         new Date(2014, 10, 15, 18),
         new Date(2014, 10,  15, 18, 45)],
        ['Eat Dinner',
         new Date(2014, 10,  15, 19),
         new Date(2014, 10,  15, 20)],
        ['Get Ready For Bed',
         new Date(2014, 10,  15, 21),
         new Date(2014, 10,  15, 22)]
      ]);

      var options = {
        height: 450,
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

日付、時刻、タイムゾーン

date または datetime に対して日付コンストラクタを使用すると、ユーザーのブラウザで設定したタイムゾーンで目的の日付または日時が返されます。Date オブジェクトを特定のタイムゾーンに設定する方法はいくつかあります。まず、Google Charts には、timeZone を指定できる Date Formatter が用意されています。これにより、DataTable の date 値と datetime 値に書式設定された値が提供されます。また、引数として文字列を new Date() コンストラクタに渡すことも、次のように Date.UTC() メソッドで引数をラップすることもできます。

new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))

これにより、Date オブジェクトが UTC（GMT）タイムゾーンで指定された日時に設定されます。そこから、タイムゾーンの必要なオフセットを計算し、必要に応じて日時を設定できます。

日付文字列表現を使用した日付と時刻

JavaScript の DataTable オブジェクト リテラル表記を使用してデータをシリアル化し、DataTable をビルドする場合、new Date() コンストラクタは使用できません。代わりに、Google Charts の日付文字列表現により、DataTable の作成時に date または datetime をシリアル化して適切に解析できます。この日付文字列形式では、new キーワードが削除され、残りの式が引用符で囲まれます。

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

重要: この日付文字列表現を使用すると、new Date() コンストラクタを使用する場合と同様に、月はゼロからインデックス付けされます（1 月は 0 か月、12 月は 11 か月です）。

以下は、先ほどと同じスーパーボウルのタイムラインですが、JavaScript オブジェクト リテラル表記と日付文字列形式を使用しています。

 
    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable({

        cols: [
          {id: 'team', label: 'Team', type: 'string'},
          {id: 'start', label: 'Season Start Date', type: 'date'},
          {id: 'end', label: 'Season End Date', type: 'date'}
        ],

        rows: [
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
          {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
          {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
          {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
          {c: [{v: 'Seattle Seahawks'},     {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
        ]
      });

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

この形式は arrayToDataTable() メソッドでも使用できます。ただし、列ラベルを指定した最初の配列で、必要な列を type: 'date' または type: 'datetime' として宣言します。

var data = google.visualization.arrayToDataTable([
  ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
  ["Baltimore Ravens",     "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
  ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
  ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
  ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
  ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
  ["Indianapolis Colts",   "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
  ["New York Giants",      "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
  ["New Orleans Saints",   "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
  ["Green Bay Packers",    "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
  ["New York Giants",      "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
  ["Baltimore Ravens",     "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
  ["Seattle Seahawks",     "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);

Timeofday を使用する

DataTable の timeofday 列データ型は、3 つまたは 4 つの数値の配列を取ります。それぞれ時間、分、秒、必要に応じてミリ秒を表します。timeofday の使用は、値が日付に対して固有ではなく、date と datetime が常に日付を指定するという点で、date や datetime を使用する場合とは異なります。

たとえば、午前 8 時 30 分は [8, 30, 0, 0] となり、4 番目の値は省略可能です（[8, 30, 0] と同じ timeofday 値が出力されます）。

 
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }

軸ラベル、グリッド線ラベル、目盛りラベルの書式設定

日付、日時、timeofday を使用する場合、軸ラベル、グリッド線ラベル、目盛りラベルを特定の方法で書式設定することをおすすめします。これにはいくつかの方法があります。

まず、hAxis.format オプションまたは vAxis.format オプションを使用します。このオプションは、gridlines.count オプションを省略した場合に適用されます。省略された場合、グラフはデフォルトでカウントの 5 に設定されます。また、-1 以外の数値に設定されている場合にも適用されます。これにより、日付/日時/timeofday のさまざまな部分にプレースホルダ文字を使用する書式設定文字列を指定できます。プレースホルダとその仕組みの詳細については、日付フォーマッタ リファレンス、特に pattern セクションをご覧ください。

 
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Rating');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);


        var options = {
          title: 'Rate the Day on a Scale of 1 to 10',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }

また、gridlines と minorGridlines の下に、両方の軸で units オプションを含めることで、特定の日付と時刻の値の単位に対して書式ルールを指定することもできます。このオプションは、gridlines.count オプションが -1 に設定されている場合にのみ使用されます。

gridlines.units オプションはオブジェクトで、計算されたグリッド線の日付/日時/時刻をさまざまな形式で指定できます。グラフでは、グリッド線のラベルのスペースに収まる最初の形式に基づいてグリッド線が計算されます。形式は、年、月、日、時、分、秒、ミリ秒で設定できます。

format オプションには文字列形式の配列を指定できます。形式がラベル領域に収まるまで、これらの形式が順番に使用されます。このため、形式を長い順に表示することをおすすめします。文字列形式では、前述の日付フォーマッタ リファレンスと同じパターンを使用します。

上のグラフでは、ビュー ウィンドウを変更すると、hours 単位の形式が変わります。これは、時刻がマイナー グリッドラインからメジャー グリッドラインに切り替わり、それに応じてオプションの表示形式も変化するためです。また、最初の形式は各インスタンスのスペースに収まらないため、minerGridline は 2 つ目の短い形式を使用します。

        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['MMM dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }

JavaScript の日付に関する詳細情報

JavaScript Date() オブジェクトの詳細については、Mozilla Developer Network が最適です。 JavaScript Date オブジェクトについて