Datum und Uhrzeit

Übersicht

Die Datentypdatenspalten date und datetime verwenden die integrierte JavaScript-Datumsklasse.

Wichtig: In JavaScript-Datumsobjekten werden Monate ab null indexiert und elf durch die Nachrichten gestiegen. Dabei ist Januar der Monat 0 und Dezember der Monat 11.

Daten und Uhrzeiten mit dem Datumskonstruktor

Datumsangaben mit dem Datumskonstruktor

Wenn Sie ein neues Date-Objekt erstellen möchten, rufen Sie den Konstruktor Date() mit dem Schlüsselwort new auf und geben Argumente an, um Komponenten des Datums anzugeben. Diese Argumente bestehen aus mehreren Zahlen, die den verschiedenen Attributen Ihres Datums entsprechen.

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

Wenn Sie den Datumskonstruktor mit dem Datentyp date verwenden, müssen Sie nur das Jahr, den Monat und den Tag angeben.

Der Datumskonstruktor kann auch das Format new Date(Milliseconds) haben. Milliseconds ist die Entfernung in Millisekunden vom gewünschten Datum ab dem 1. Januar 1970 um 00:00:00 UTC. Für Datumsangaben und Zeiten vor diesem Datum wird eine negative Anzahl von Millisekunden angegeben.

Der Datumskonstruktor ist nützlich, wenn Sie die DataTable mit den Methoden addColumn(), addRow() und addRows() sowie mit der Methode arrayToDataTable() manuell erstellen. Wenn Sie jedoch JSON zur Angabe von Daten verwenden, muss die Stringdarstellung verwendet werden.

Der JavaScript-Datumskonstruktor kann auch eine Stringdarstellung des Datums als Argument akzeptieren. Dieser String kann verschiedene Formen haben. Die zuverlässigsten Formulare entsprechen entweder der RFC 2822-Spezifikation oder der ISO 8601-Spezifikation. Die Formate sind:

  • RFC 2822 – 'MMM DD, YYYY' oder 'DD MMM, YYYY' (Beispiel: new Date('Jan 1, 2015') oder new Date('1 Jan, 2015'))
  • ISO 8601 – 'YYYY-MM-DD' (Beispiel: new Date('2015-01-01'))

Warnung:Die Darstellung des Strings im Datumskonstruktor kann je nach Browser und Version des Browsers unterschiedlich geparst werden. Dann werden unterschiedliche Datumsangaben für denselben String zurückgegeben. Es wird daher nicht empfohlen, Strings an den Datumskonstruktor zu übergeben. Stattdessen sollten Sie für die Argumente des Datumskonstruktors nur Zahlen verwenden.

Der folgende Zeitplan zeigt den Super Bowl-Champion der jeweiligen NFL-Saison seit 2000.


Unten findest du den Code zum Erstellen dieser Zeitachse. Beachten Sie die Verwendung der new Date()-Konstruktoren und die für jedes Datum angegebenen Zahlen mit 0-basierten Monaten, wie zuvor erwähnt.

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

Datetimes mit dem Date Konstruktor

Der Datentyp der Spalte datetime der DataTable verwendet denselben Date-Konstruktor wie der Datentyp date, verwendet jedoch jetzt alle Argumente zum Ausfüllen der Zeit.

Alternativ kann eine Stringdarstellung von datetime an den Date-Konstruktor übergeben werden. Eine Stringdarstellung von datetime besteht aus der Addition der Stunden, Minuten und Sekunden zusätzlich zum vierstelligen Zeitzonenversatz (z.B. Pacific Standard Time (PST) -0800). Für die RFC 2822-Spezifikation werden Uhrzeit und Zeitzone mit Leerzeichen zwischen dem Datum und der Uhrzeit sowie der Uhrzeit und der Zeitzone hinzugefügt. In der ISO 8601-Spezifikation gibt es keine Leerzeichen. Stattdessen steht das Datum gefolgt von einem großen „T“ für eine Zeitkomponente. Außerdem gibt es keinen Abstand zwischen der Zeit und der Zeitzonenverschiebung. Der vollständige Datumsstring datetime für den 6. Dezember 2014 um 10:30 Uhr wäre:

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

Warnung: Auch hier kann die Stringdarstellung je nach Browser/Version unterschiedlich geparst werden. Insbesondere bei der Verwendung von Uhrzeit und Zeitzonen gibt es Unterschiede darin, ob die Datetime mit einer UTC-Zeitzone (GMT) zurückgegeben wird oder ob sie verschoben und in der Ortszeit zurückgegeben wird. Dies ist ein weiterer Grund, warum die Verwendung von Datum/Uhrzeit-Strings nicht empfohlen wird.

Die folgende Zeitachse schlüsselt einen durchschnittlichen Tag mit dem Datentyp „Datum/Uhrzeit“ auf.

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

Datums-, Uhrzeit- und Zeitzonenformat

Wenn Sie den Datumskonstruktor für date oder datetime verwenden, wird das gewünschte Datum oder die gewünschte Datumszeit in der vom Browser des Nutzers festgelegten Zeitzone zurückgegeben. Es gibt mehrere Möglichkeiten, das Datumsobjekt auf eine bestimmte Zeitzone festzulegen. Zuerst bietet Google Charts einen Datumsformatierer, in dem Sie eine timeZone angeben können. Dadurch wird für jeden Ihrer date- und datetime-Werte in Ihrer DataTable ein formatierter Wert bereitgestellt. Sie können auch einen String als Argument an den Konstruktor new Date() übergeben oder die Argumente in der Methode Date.UTC() umschließen, z. B.:

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

Dadurch wird ein Datumsobjekt auf das angegebene Datum und die angegebene Uhrzeit in der Zeitzone UTC (GMT) festgelegt. Dort können Sie den gewünschten Zeitversatz für die Zeitzone berechnen und die gewünschten Daten und Uhrzeiten festlegen.

Datums- und Uhrzeitangaben unter Verwendung der Datumsstring-Darstellung

Beim Serialisieren von Daten mit der JavaScript-DataTable-Objektliteral-Notation zum Erstellen der DataTable kann der new Date()-Konstruktor nicht verwendet werden. Stattdessen bietet Google Charts eine Datumsstringdarstellung, mit der date oder datetime beim Erstellen einer DataTable ordnungsgemäß serialisiert und geparst werden kann. Bei diesem Datumsstringformat wird nur das Keyword new gelöscht und der verbleibende Ausdruck in Anführungszeichen gesetzt:

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

Wichtig: Wenn Sie diese Darstellung als Datumsstring wie bei dem Konstruktor new Date() verwenden, werden Monate ab null indexiert (Januar ist Monat 0, Dezember ist Monat 11).

Unten sehen Sie dieselbe Super Bowl-Zeitachse wie zuvor, jetzt jedoch mit der Notation für JavaScript-Objektliteral und Datumsstringformat.

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

Dieses Format kann auch in der arrayToDataTable()-Methode verwendet werden. Voraussetzung dafür ist, dass im ersten Array mit angegebenen Spaltenlabels die erforderliche Spalte type: 'date' oder type: 'datetime' deklariert ist.

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)"]
]);
  

Mit der Tageszeit arbeiten

Der Datentyp der Spalte timeofday der Tabelle verwendet ein Array von 3 oder 4 Zahlen für Stunden, Minuten, Sekunden bzw. Millisekunden. Die Verwendung von timeofday unterscheidet sich insofern von date als auch von datetime, dass die Werte nicht datumsspezifisch sind, während date und datetime immer ein Datum angeben.

Beispiel: 8:30 Uhr: [8, 30, 0, 0], wobei der 4. Wert optional ist ([8, 30, 0] würde denselben Wert für die Uhrzeit ausgeben).

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

Labels für Achsen, Gitternetzlinien und Teilstriche

Wenn Sie mit Datumsangaben, Datum und Uhrzeit arbeiten, ist es möglicherweise wünschenswert, die Labels der Achsen, Rasterlinien oder Teilstriche auf eine bestimmte Weise zu formatieren. Dafür gibt es mehrere Möglichkeiten.

Als Erstes können Sie die Option hAxis.format oder vAxis.format verwenden. Diese Option wird angewendet, wenn die Option gridlines.count weggelassen wird. In diesem Fall werden standardmäßig die Anzahl 5 des Diagramms und eine andere Zahl als -1 festgelegt. So können Sie einen Formatstring angeben, bei dem Sie Platzhalterbuchstaben für verschiedene Teile Ihres Datums/Datum/Uhrzeit verwenden. Weitere Informationen zu den Platzhaltern und ihrer Funktionsweise finden Sie in der Referenz zum Datumsformatierer, insbesondere im Abschnitt zu 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);
        };
      }
  

Sie können auch Formatierungsregeln für bestimmte Einheiten von Datums- und Uhrzeitwerten festlegen. Fügen Sie dazu für beide Achsen die Option units unter gridlines und minorGridlines hinzu. Diese Option wird nur verwendet, wenn die Option gridlines.count auf -1 gesetzt ist.

Die Option gridlines.units ist ein Objekt, bei dem Sie das Format für die verschiedenen Aspekte von Datum/Datum/Uhrzeit für die berechnete Gitternetzlinie angeben. In Ihrem Diagramm werden dann die Gitternetzlinien auf der Grundlage des ersten Formats berechnet, das zum Feld für das Gitternetzlinien-Label passt. Sie können die Formate für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden festlegen.

Für die Formatierungsoption können Sie String-Formate verwenden, die in der angegebenen Reihenfolge verwendet werden, bis ein Format in den Labelbereich passt. Aus diesem Grund empfiehlt es sich, die Formate von der längsten zur kürzesten Zeit aufzulisten. Die Stringformate verwenden dieselben Muster wie die zuvor erwähnte Datumsformatierung.


Wenn Sie das Ansichtsfenster im obigen Diagramm ändern, ändert sich das Format für die hours-Einheit, da die Stunden von Neben- zu den Hauptgitternetzlinien wechseln. Außerdem ändert sich das Format in den Optionen mit ihnen. Beachten Sie außerdem, dass Minderjährige-Raster die zweiten, kürzeren Formate verwenden, da die ersten Formate nicht in jede Instanz passen.

        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']}
            }
          }
        }
  

Weitere Informationen zu JavaScript-Daten

Wenn du mehr über das Date()-JavaScript-Objekt erfahren möchtest, empfehlen wir dir das Mozilla Developer Network. Dort erfahren Sie alles über JavaScript-Date-Objekte.